How to edit spacing in Product pages

[prc93ltda]

Hello, the way the default theme is designed makes the product image and the right side of the page too together. How can I space it out without it affecting the whole website and just this page or just my product pages?

 

What are some recommended options besides 1170px? Thank you!

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can add custom css in Claue > Theme Option > General Layout > Custom CSS

.product .jas-col-sm-7 { flex-basis: 58.333%; max-width: 58.333%; }

.product .jas-col-sm-5 { flex-basis: 41.666%; max-width: 41.666%; }

 

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry,

 

Thank you for the response. I added the code but I didn’t notice any changes at all.

[Harry]

Could you explain more your issue.

As i understand you want reduce white space on right section of product. Make space on left and right equal. https://monosnap.com/file/9b04vx2fqhAwmqR2Dc2MfyoBQw1Gq5#

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

No, I’m sorry for not being clear. I want to move the left side and the right side of the page apart from each other. I’d like to be more space in between them since they are too close together, please see image. Thank you!

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can change prev code to

.product .jas-col-sm-7 { padding-right: 30px;}

.product .jas-col-sm-5 {padding-left: 30px;}

.jas-wc-single .product-extra .badge .right { right: 30px; }

And change 30px with your number.

Best regards

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Thank you Harry!

One little issue is that as I increase the px number, the product image goes down in size, please see image. How can I fix this? thank you!

Attachments:

You must be logged in to view attached files.

[Foster]

Hi there,

Please use this custom CSS code

.p-thumb img { width: 100%; }

Cheers,
Foster

[prc93ltda]

Hi Foster,

Thank you for your response. The code provided didn’t work. The image is still not the right size

Attachments:

You must be logged in to view attached files.

[prc93ltda]

And this is the way it looks on mobile, the code broke the mobile part of the website

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. We don’t clear the issue with product image, if you add more space between the image and content so the image has to reduce dimension to fit content. Only the image when zoom can keep original size.

2.You can add below code to fix for mobile

@media only screen and (max-width: 1024px) {
.product .jas-col-sm-7 { padding-right: 15px;}

.product .jas-col-sm-5 {padding-left: 15px;}

.jas-wc-single .product-extra .badge .right { right: 15px; }
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry,

This is what the website looks like normally, and as you can see there is plenty of space to both side of the page (highlighted in pink), I just want to be able to space out things without damaging the website, it shouldn’t be hard, I’m not sure why it’s such an issue for you guys to help me figure it out without breaking the website.

The way you guys built those product pages are not optimized for conversions so I need to space out the right side of the page (the CTA,s the price and all of that) and the left side of the page (the images and gallery) so that users have a better experience.

That’s the issue, what’s the point of having a “nice looking website” if people don’t have a good experience

Attachments:

You must be logged in to view attached files.

[prc93ltda]

This is one of the websites I had before I switched to Claue. Notice how much the empty white space helps the website look better and more clean and that’s the point of optimizing for conversions, so that people have a nice experience when they buy, that’s what I’m trying to accomplish here that’s what I need my product pages to look like so I need a code that can help me space out the page without breaking the mobile part of it

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

This issue because not clear. It better if you give us this screen shot from the first time.

You prev screen shot have a line at center i think you want increase space between product image and product info.

It easy if you tell us you want product layout full screen :).

Please remove the code and go to Claue > Theme Option > WooCoommerce > Product Detail Settings > Enbale full width > On.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Ups! Yes, that’s the one, I’m sorry Harry yeah that’s what I wanted full with, you’re right. Thank you!

So I activated it and there’s still a lot of empty space on the right (highlighted in the image 1) and it seems that overall the page is not centered.

How can I move the right side of the page (title, button, price and all that’s in the pink square image 2) more to the right and center it with the social media icons?

Thank you for the help and patience 🙂

Attachments:

You must be logged in to view attached files.

[Harry]

You’re welcome. If everything clear we can do it faster 🙂

You can make content on the right to center by add custom css code

.summary.entry-summary {
text-align: center;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

That is perfect. Thank you!

[Author]

Posts