Docs

[Nina M]

Hi, I would like to do two things to my product page:

1. I would like to move the ‘Add to Cart’ button above the ‘Chocolate Selections’ area of the page.

2. I would like to make the ‘Chocolate Selections” list into 2 columns.

Thank you so much for any help –

[Nina M]

Here are screen shots from the product page – if you just go to ‘store’ and select any product you will see what I am talking about. Thank you!

[Nina M]

This reply has been marked as private.

[Thai]

Hi There,

#1] Please add the following CSS under Customizer > Custom > Global CSS:

.single-product .product-addon {
    column-count: 2;
}

#2] Please add the following code under Customizer > Custom > Global Javascript:

jQuery('.single-product .single_add_to_cart_button, .single-product .addon-name').insertBefore('div.product-addon');

Hope it helps 🙂

[Nina M]

Oh, this is great! Working but not quite there – see image attached. I actually want the ‘add to cart’ button to sit above the chocolate selection heading and with a little padding around it (maybe 15-20px)
thanks for such a prompt reply!

[Nina M]

I also need to move up the sku and the quantity picker (see attached photo) from the bottom of the page.

THANK you !

[Thai]

Hi There,

Please update the previous code to this:

jQuery('.single-product .addon-name').insertBefore('div.product-addon');
jQuery('.single-product .single_add_to_cart_button, .single-product .quantity, .single-product .product_meta').insertBefore('.single-product .addon-name');

Then adding the following CSS:

.single-product .single_add_to_cart_button {
    margin: 18px 0;
}

Regards!

[Author]

Posts