Woocommerce product add-ons plugin

[LucasPastaBoys]

Hello,

Today I added the WooCommerce product add-ons plugin to my WordPress site, to make it possible to add product variants to my pasta’s. On the desktop version of the website it works fine, it displays the variations options next to the add to cart button.

However, on the mobile version showing them side by side is not possible, and therefore the functionality is destroyed.

On the WooCommerce website there is a solution for this problem, via this link it can be found https://docs.woocommerce.com/document/product-add-ons/?_ga=2.140808498.189868487.1621834480-355348349.1608645300. Under the section “How can I change the position of the add-ons on my product page?”

I understand where I have to add the temple php file in my WordPress install. However, I don’t know which php file(s) I have to add. In the text it is reference to as template-file.php, however I cannot find this file in the files you can download with this link https://docs.woocommerce.com/document/template-structure/

A link to my the problem on my website can be found here.

http://billyh.sg-host.com/product/pasta-bolognese/

If you open it on desktop it should look fine, but on mobile you will see the problem.

Could you help me with this? Thanks in advance.

With kind regards,
Lucas

[Billy Nguyen]

Hi,

You can use css code paste into file style.css ( child-theme):

@media (max-width: 768px){
.woocommerce div.product.elementor form.cart.variations_form .woocommerce-variation-add-to-cart, .woocommerce div.product.elementor form.cart:not(.grouped_form):not(.variations_form){
  display: block !important;
}}

[LucasPastaBoys]

It works, thank you for your help!

[Billy Nguyen]

Ok, let me know if you need to help.

[Author]

Posts