Single Product Layout

Hello,
I have a question regarding single product layout.
When I create variable product with different prices I have following design issues:
1 – The variable is directly above add to cart button and seems to be inseparable. Is there any way to set them up separately?
2 – Add to cart – There seems to be no settings of height, width and position. Only default or full-width option. Is there any way to control it?
3 – Price – On the attached snip, the price for variable product is displayed as range between the cheapest and most expensive one. Is there a way to set up a price that would change accordingly to chosen variable?

Please see attached images, Single Product.jpg is the design goal and Add to Cart is current state.

Best regards

Attachments:

You must be logged in to view attached files.

Hello,

1- & 2- Firstly, as you know the default layout of the Single Product page comes from WooCommerce and isn’t directly editable with the Page Builder plugins so it is not possible directly to do that with the default layout.

But the WoodMart Theme provides the option of the Layout Builder through which you can create Custom Layouts for the Archive pages including Shop, Category, Single Product page, Cart and Checkout pages. So, you can check out that: https://xtemos.com/docs-topic/single-product-page-builder/

Using those Custom Layouts, you can move certain elements to your choice.

3- By default for the Variable Products, the Price Range is displayed above and when you select the variant options, then below it displays the actual Price of that selected variant as depicted in the following Image: https://snipboard.io/KlhxgA.jpg

This is how by default Variable Products shows Prices under WooCommerce.

But if you want to remove the Duplicate Price like it is depicted in the following GIF: https://woodmart.xtemos.com/theme-settings-tooltips/remove-duplicate-price-for-variable-product.gif

Then you need to navigate to Dashboard > Theme Settings > Shop > Variable Products > scroll down a bit where you can find Price > in that you will find the option Remove duplicate price for variable product > you can enable that: https://snipboard.io/DRWOfg.jpg

Hope this helps !

Best Regards.

Hello,
regarding the price, all is set up, thank you providing solution.
Regarding 1&2 – I created the custom layout, but still, there is no option, to put the variable table into a separate element. I inspected the site and found out following – I need to have control over the element table.variations in terms of height, width and position. (See Variations Element in attachment). I also need to have control over the element add to cart in terms of height, width and position. (See AddToCart in attachment). If it is not possible to separate these elements into two distinctive ones, then at least I need them to be the same size and position. (See SingleProduct in attachment)

Best regards

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but your Site is currently on Maintenance mode so we are unable to view the concern issue.

Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check these concerns on your Site and help you out accordingly.

Best Regards

Hello, sending login down below.

Hello,

Your Site preview also has the Site Login and Password other than the WP-ADMIN Logins.

So, kindly please share that too because without that we are unable to proceed further.

Best Regards.

Sure, sending access down below as well.

Hello,

For the Attribute Table element to have added as the separate Section under the Custom Product layout then you need to add Product extra content element: https://snipboard.io/pvbPwV.jpg

For the Add to Cart button, it is added through the Product add to cart element so it doesn’t provide the option to add the Add to Cart button separately right now but the Full Width option for this already available and you have selected it too so it is appearing Full Width according to the space available there: https://snipboard.io/LfsJHZ.jpg

Best Regards

Hello,
that is not quite what I mean. Above add to cart, there is variable field option of material.
I want this field to be 156×30 px and I want AddtoCart button to be 156x40px. Furthermore, they should be above each other at the same position on Y axis. Now the material field is slightly offset to the left.
Also, is there a way to control the width/height of these elements on different resolutions for different devices?
Adding an image in attachment for clarification.

Hello,

Sorry to say but we didn’t get any attachment in your response.

Regarding the concern, the thing is the Add to Cart button along with the variable product selection both are coming through a single element Product add to cart under the Custom Single Product layout so there isn’t a separate option available to specifically define the width & height for them.

For the Swatches or variant selection, you can select Default or Inline from the available options and for the Add to Cart you can select Default or Full width button.

Best Regards.

[Author]

Posts