Single Product Page Layout Issue with Variable Products

DiazOwlBlaze · March 3

Hi,

I'm using BeTheme with WooCommerce and have successfully customized my single product page layout for simple products. However, I recently added a variable product (with size variations), and it has distorted the design compared to my previous layout.

I’ve attached two screenshots:

This is the desired design.
This is the current product page with variations, showing the issue.

I want the variable product page to match the exact layout of the simple product page, including the positioning of the elements, styling, and overall appearance.

Additionally, instead of a dropdown for selecting sizes, I’d like the sizes to appear as round buttons (or swatches) for a cleaner and more user-friendly design.

Could you please guide me on how to achieve this while keeping the variation functionality intact? I'm open to modifying BeTheme settings, custom CSS, or using a child theme if necessary.

Thank you for your help!

DiazOwlBlaze · March 3

WP/FTP access is still the same in case you want a clear view!

Thank you!

Kind regards

Phil · March 4

Hi,

Please use the following CSS code:

.single-product .woocommerce-variation-add-to-cart{
 flex-wrap: wrap;
}

See the following video tutorial:

https://support.muffingroup.com/video-tutorials/how-to-use-woocommerce-attribute-swatches/

You may also want to extend Add to cart element to 1/1 width.

Best regards

DiazOwlBlaze · March 6

Hi,

Thank you for the fix and the tutorial link! I’m still working through this.

As you can see on the second screen, the highlighted elements are completely distorted!

All I want is to replicate this design (first screenshot).

Much obliged.

Single product template distorted elements.png

Phil · March 7

The button would be as in your example, but you have the following custom CSS code that prevents it from working properly:

It looks like this without this:

The button display to have a border, etc., can be adjusted in Betheme -> Theme options -> Global -> Buttons:

Or as you have it now, in overwritten in the template:

To put Quantity text before the quantity box, you can try the following CSS code:

.single-product .woocommerce-variation-add-to-cart .quantity:before{
 display: block;
 content: "Quantity";
 margin-bottom: 8px;
 color: #000;
}
.single-product .woocommerce-variation-add-to-cart .quantity-change{
 top: 22px!important;
}

Best regards

DiazOwlBlaze · March 9

Hi, I hope you are doing good.

Ive successfully fixed the buttons alignments following your instructions, which I find great!

The other things I would like you to enlighten me about are those four main points:

I would like to remove this size guide expression from here (number 1). I have it as a pain point.
I would like a rounded borders outlines around the Add to cart button (number 2) just like how it's shown in the 2nd screenshot (number 4). You told me it can be adjusted in Buttons setting in my theme options but I'm finding difficulties doing so!
Should I use a regular plain text to recreate this "calculated at checkout" expression (number 3) ? And how can I set it to display in the same position for each product?

Thank you for your valued assistance!

Kind regards

DiazOwlBlaze · March 9

I have updated my login credentials and sent them to you via this link https://themeforest.net/user/muffingroup to have a clear view.

Thank you !

Phil · March 10

1) It comes from one of your plugins. To find which plugin adds it disable them one by one.

2) Border radius option is here:

Or here:

Note that you did not assign border width:

3) Yes, you should add it as Plain text or Column Text in the product template:

To look like this, change price element width to inline:

Best regards

DiazOwlBlaze · March 11

Hi there!

I have identified the plugin responsible for it. Appreciate you telling me this!
I've successfully setup the width and radius (screenshot). the only thing left regarding this is the Add to cart button alignment with the CTA. Can you give me some hints on it ? And how can I add some spacing between elements accordingly for a more appealing aesthetic?
First I have changed it to inline as you've mentioned and Ive added the plain text element just like you said as well as inserting the " Shipping calculated at checkout ". The thing is that I want to include a link to the word "Shipping" separately to make people redirected to my shipping policy page, and this once they click on the word which will be underlined on hover (the first word in the beginning). I've tried enabling short-code parser in my builder and making the word underlined on hover with a link but I found it quite complicated! Also could you show me how did you achieve to place the plain text expression right beside the product price ? Because I find it quite interesting and user friendly.

One last thing I would like help with is how can I make my size variations display like this upon selection?

Appreciate your help as Ive learned so much from what you've told me.

Thank you so much

Appreciate it

DiazOwlBlaze · March 11

Here's a well detailed screen of what I'm trying to setup.

Thanks!

Phil · March 11

2) By CTA, do you mean the "Pay with PayPal" button? If yes, most plugins have their styling setting in the plugin options.

If you do not see anything there and the plugin author does not provide customization options, let me know, and I will check if this can be done with custom CSS.

3a) To have a link on the word "shipping," simply put it in the <a> tag. So it should look like this:

<a href="#">Shipping</a>...

In place of #, put a link to the page you want.

3b) Also, put text next to the price decrease the width of the Text element:

4) Your variations already look like this:

I am not quite sure how you want to change them.

If you mean the black background for the active variation, please use this CSS code:

.single-product .mfn-vr .mfn-vr-options .active a{
 color: #fff!important;
 background: #000;
}

Best regards

DiazOwlBlaze · March 11

2) Yes by CTA I mean the call to action button which is the plugin's PayPal button in my case as I don't have any ability to align it beautifully with my Add to cart button.

Those are the only design options I have:

Though I don't think my payment plugin have an option to expand the button to fit the add to cart element along with its dimensions if I'm not wrong.

3) a. Done, thank you !

b. I've managed to do it, I like how things look in Betheme appreciate it.

4) Yes you're right, I mean the black background when the variation is active. The CSS did the thing!

Thanks. Appreciate you!

Kind regards

Phil · March 12

2) I can see that it is wider now:

But there are still some pixels missing to be the same width as the add to cart button.

However, I checked that, and it is displayed using iframe, which means that no external custom CSS codes will affect it.

In this situation I can only recommend contacting the plugin author if they can provide a solution for your desired design.

Best regards

DiazOwlBlaze · March 12

Hi,

here is what I've received after contacting the plugin author.

I quote:

" Hi Youness,

The reason the button isn't expanding is because PayPal internally limits the max width of the PayPal button to 750px wide. It will not expand beyond that length because they control that with internal code.

Unforuntately there isn't a way to change that limitation. "

Phil · March 13

So it means that, unfortunately, there is no way to change this button further, and my hands are tied.

Please let me know if I can help you with anything else.

Best regards

DiazOwlBlaze · March 13

In this case, I would like make the Add to cart button fit the 750 width of their CTA button or any width that would look correct on my page display! How about this ?

Thanks!

Kind regards

DiazOwlBlaze · March 13

To*

DiazOwlBlaze · March 13

The most important thing for me is to ensure a natural look for this, that's all

Any suggestions are welcome. If it gave you a headache, no worries!

I'll improvise a solution.

Best regards

Phil · March 14

You can decrease a little add to cart button element:

Best regards

DiazOwlBlaze · March 14

Perfect! I'm currently working on it, thank you so much

Appreciate you!

Kind regards

DiazOwlBlaze · March 15

Hi, I need help adjusting how my size variations are displayed on the single product page.

Currently, the size options (S, M, L, XL, etc.) appear on the same line as the "SIZE" label.

I want them to appear directly below "SIZE" as shown in the screenshot below:

I've attempted the following CSS, but it didn't work:

.single-product .mfn-vr label {

display: block;

margin-bottom: 8px;

}

.single-product .mfn-vr-options {

display: flex;

flex-wrap: wrap;

width: 100%;

margin-top: 8px !important;

clear: both;

}

The size buttons are still appearing next to "SIZE" instead of below it.

Can you provide the correct CSS or suggest a setting in BeBuilder that ensures the size variations appear below "SIZE"?

Kind regards

DiazOwlBlaze · March 16

2) Also, I would like to let you know about another issue Ive encountered which is the cart page on my back end isn't displaying the elements correctly on the front end!

As you can see on the following screenshots, things are a bit distorted!

Thanks!

DiazOwlBlaze · March 16

Number 2 is fixed thank you!

Only the size line issue left!

Kind regards

DiazOwlBlaze · March 16

The cart page keeps getting distorted on the front end again :/

DiazOwlBlaze · March 17

I'm a little bit confused about the overall page creation in Bebuilder. As I'm finding difficulties to relate on how templates are automatically overriding normal pages! Otherwise when I create a new template should I go and add a new page ? How can I assign template to the proper pages? And how can I make sure I handle Woo commerce advanced default pages settings seamlessly with my templates (default cart page, default checkout page..) ?

I find it a bit tricky ! Could you enlighten me more on this?

Thank you!

Kind regards.