Single product layout

Hello team,

I have created a custom product and added variations and a size guide. In the column, I added the size guide after the variation, but it is showing above the variation. Can you please check what the issue is?

Best

Hello,

I checked your product page, and the size guide appears above the variation selector because it’s currently added in the column above the “Add to Cart” section within your product layout.

If you’d like the size guide to appear below the variation options, please move the size guide element below “Add to Cart” element in your layout builder. Once you adjust the position, it will display in the correct order on the product page.

Best Regards,

I want it between add to cart and below the size variation. Please help.

Hello,

In the current structure, the variation options and the Add to Cart button are part of the same element; they’re generated together by WooCommerce within the same HTML block. Because of this, it’s not possible to insert the size guide between them using CSS or layout settings alone.

The HTML structure does not allow solving it. Such modification requires complicated WooCommerce code customization, which is not covered by our support.

Best Regards,

Okay, Just one small thing, can we add 10px space between add to cart button and variations.

Hello,

Try to add the following custom css code in Theme Settings > Custom CSS > Global Custom CSS area.

.woocommerce div.product form.cart .variations {
    margin-bottom: 10px !important;
}

Best Regards,

This is resolved!!

Hello,

You’re Most Welcome!.

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts