0

I have manage to get product variations to display on the shop page using the code below:

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
   

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );


function iconic_loop_variation_add_to_cart_button() {
    global $product;

    ?>
    <div class="woocommerce-variation-add-to-cart variations_button">
        <button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
        <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="variation_id" class="variation_id" value="0" />
    </div>
    <?php
}

The shop page looks like this currently:

enter image description here

However, I have two issues I require help with:

Issue 1: I want to style the variations (move it to the center and create some spacing). However, I noticed that the whole object is the same as variations found in the main product page, so if I change the css there, it will affect the other. Is there a way I can inject my own class for products found in shop and category to help create that seperation?

Issue 2: It would be good to add a custom button "Quick Shop" where when the user selects it, then it will reveal the variations, quantity and add to cart button. Also the "Quick shop" button will change to "hide" and if selected, will hide the variations, quantity and add to cart. This is to save space.

Any help will be appreciated.

Thank you

BruceyBandit
  • 3,978
  • 19
  • 72
  • 144
  • hello. could you give more informations about "variations" or give a a code example? To the first question you may get this using css selector: https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c – Fabio Ribeiro de Carvalho Jul 25 '21 at 12:28
  • In terms of variations, they are set in the woocommerce dashboard, not in code. A variation is basically attribute set for each variable product – BruceyBandit Jul 25 '21 at 12:45
  • do you have a way to differentiate variant products from non-variant products, if so, try use this in css: .products. {} – Fabio Ribeiro de Carvalho Jul 25 '21 at 12:51
  • @FábioRibeirodeCarvalho I have sorted out scenario 1 thanks to the css selectors you mentioned :) Now it's just issue 2, will be so grateful if you know how to code this as been stuck since yesterday. I will return shortly, have to take my partner for her vaccine but looking forward to your answer when I come back if you know :) – BruceyBandit Jul 25 '21 at 13:09

0 Answers0