How to align right side of product pages

[prc93ltda]

Hello, how can I align the right side of the product pages and center it?

Please look at the image attached. I’d like the right side of the page aligned and centered on the right side of the page. For some reason, the wishlist icon is just there floating and I don’t know why.

Can you please help me?

Thank you!

Attachments:

You must be logged in to view attached files.

[Harry]

I help you fixed the issue with align on product page

Best regards

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

[prc93ltda]

Hi Harry, that was a different website. I’ve bought multiple licenses to create multiple websites and all of them come that way and unfortunately, the same code doesn’t work for all of them.

Can you please give me the one that works for this website?

Thank you!

[Harry]

Hi,

This issue because new version of theme have some update. Please use new code on new site for other sites when you update theme to latest version.

Best regards

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

[prc93ltda]

Hi Harry,

I’ve tried to use the code but it doesn’t work. That’s why I have to keep coming back to open tickets every time. The same code doesn’t work for all the websites so I don’t know what to use on this one.

Could you please provide me with the code I need to use?

Thank you for all your help and patience 🙂

[Harry]

I changed the code to work with new version of our theme but you change back and remove the code i added 🙁

Please use below code

/* Center content on product detail page */
.summary.entry-summary {
	text-align: center;
}
.flex.between-xs.middle-xs.price-review {
	display: inline-block;
}
.single_variation_wrap {
	display: inline-block;
        width: 100%;
}
.variations_form .yith-wcwl-add-to-wishlist {
right: 0;
position: absolute;
bottom: 0;
}
@media only screen and (min-width: 1024px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 90px;
	}
}
@media only screen and (min-width: 1280px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 160px;
	}
}
@media only screen and (min-width: 1366px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 185px;
	}
}
@media only screen and (min-width: 1440px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 320px;
	}
}
.quantity.pr.fl {
	float: none;
	margin: 0;
}

ul.swatch__list,
.swatch__list--item {
	display: inline-block;
}

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

[prc93ltda]

You’re amazing Harry! Thank you so much, I really appreciate all the time and effort you’ve put in into this.

So moving forward can I use this same code on every website?

Thank you!

[Harry]

Hi,

For other website it now you’re running old version of our theme. When you update theme please use the same code for other site.

Best regards

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

[prc93ltda]

Okay will do thank you Harry!

One last thing, on mobile it looks different. Please see the image.

The desktop is perfect, can you please center inline the quantity increase +/- and put the wishlist button next to it like it’s on desktop please?

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please change prev code to

/* Center content on product detail page */
.summary.entry-summary {
	text-align: center;
}
.flex.between-xs.middle-xs.price-review {
	display: inline-block;
}
.single_variation_wrap {
	display: inline-block;
        width: 100%;
}
.variations_form .yith-wcwl-add-to-wishlist {
right: 0;
position: absolute;
bottom: 0;
}
@media only screen and (min-width: 1024px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 90px;
	}
}
@media only screen and (min-width: 1280px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 160px;
	}
}
@media only screen and (min-width: 1366px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 185px;
	}
}
@media only screen and (min-width: 1440px) {
	.variations_form .yith-wcwl-add-to-wishlist {
		right: 320px;
	}
}
@supports (-webkit-appearance: -apple-pay-button) {
	.single-product div.product .stripe-enabled form.cart .quantity~.button {
		max-width: 250px;
	}
        @media only screen and (max-width: 375px){ .single-product div.product .stripe-enabled form.cart .quantity~.button {max-width: 220px; }}
        @media only screen and (max-width: 767px){ .single-product div.product .stripe-enabled form.cart .quantity {float: none;}}
}
.quantity.pr.fl {
	float: none;
	margin: 0;
}

ul.swatch__list,
.swatch__list--item {
	display: inline-block;
}

Best regards

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

[prc93ltda]

Good afternoon Harry, Thank you for your help in trying to resolve this ongoing issue.

I have pasted the code you provided into 2 other site product pages, exactly as you provided above and it did not center the requested items of the products page.  I am including the URLs for your observation:

http://all4dancers.com/product/product-placeholder/
https://krissydcosmetics.com/product/product-accessories/

Here is the working one with the same exact code:

KIDDIE DEN

The same code is not working across all product pages.
Claue theme version 1.3.3, All sites licensed.
Can you please review the code you provided and update for solution were necessary.
Thank you for all your help Harry – greatly appreciated.

 

[Harry]

Hi,

Please add more code

form.cart {
	display: inline-block;
}
form.cart .yith-wcwl-add-to-wishlist {
	position: absolute;
	right: -52px;
	bottom: 0;
}
form.cart .quantity.pr.fl {
	display: block;
	margin-bottom: 15px;
}

Best regards

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

[prc93ltda]

Thank you so much for your outstanding help Harry – Greatly appreciated.
This solution has produced the desired result – congratulations 🙂

https://krissydcosmetics.com/product/product-accessories/

KIDDIE DEN

https://all4dancers.com/product/product-placeholder/

 

[Author]

Posts