Docs

[Gabriel]

Hello,

I would like to move price, stock, qty and add to cart button above the variant selector, but keep the variant description below:

[Product description]
[Price][Stock][Qty][Add to cart]
[Variant selector]
[Variant description]

Any suggestions?

[Rupok]

Hi there,

Thanks for writing in! It could be possible with CSS. Kindly provide your URL so that we can check the current setup. If it’s not possible with CSS then you will need to use Child Theme to modify the template.

Cheers!

[Gabriel]

This reply has been marked as private.

[Gabriel]

What I’m aiming for is actually to have the main image right before the add to cart button tightly followed by the swatches. When using a phone and clicking one of the swatches one shouldn’t have to scroll very far to see the affect, and thus I wish the add to cart to be between the image and the variant selector/swatches.

Many thanks!

[Rad]

Hi there,

Hmm, have you tried contacting the plugin author? I’m not really sure how their template works, it’s a javascript template and non-standard to Woocommerce. How about arranging them through jQuery?

Thanks!

[Gabriel]

Yes I am in contact with them, but in this case it doesn’t seem to matter. Apart from the variable.php I’m using the template files from Woo and X, the variation.php for example. What’s your comment on variation.php?

So say you were to do it on a standard X + Woo installation, how would you go about it?

How would you do it with jQuery?

[Rue Nel]

Hello There,

Thanks for updating in! We can try to create a custom jQuery code that will rearrange the elements in your product page. I wanted to check out one of your product page. Regretfully, I wasn’t able to login because I am seeing an error. http://prnt.sc/ds49pi

Could you please remove your under construction plugin because it is creating some issues.

Please let us know how it goes.

[Gabriel]

It’s the Under construction plugin that comes with X.

I disabled it. Remove it if you wish. Feel free to disable what you want.

G.

[Gabriel]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! I have tried adding a jQuery code. Regretfully the variation description is dynamically added everytime you click on any color variation. I used this code by the way.

(function($){
  $('.woocommerce-variation-description').insertAfter( $('.variations') );
})(jQuery);

This code doesn’t work because you’ll end up having a duplicate description just like shown here: http://prntscr.com/ds4lcv

More can be done with custom development regretfully this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Gabriel]

I understand, many thanks for having a go. I’ll investigate this further.

May I ask which script adds the description?

[Rue Nel]

Hello Again,

The variation descriptions were added dynamically by WooCommerce. To know more about product variations, you can check out the documentation here: https://docs.woocommerce.com/document/variable-product/

Thank you for your understanding.

[Author]

Posts