Add to Cart

Dear Support, I would like to know how to move the align the price and add to cart to middle?

Attachments:

You must be logged in to view attached files.

Hello,
Try to add the following code snippet to the Custom CSS area in Theme Settings.

div.basel-hover-alt .product-title,
div.basel-hover-alt .price {
	text-align:center;
}

div.basel-hover-alt .wrap-price {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

Kind Regards
XTemos Studio

hi, i have done that and it works for desktop but not mobile presentation. Can you please advise

Attachments:

You must be logged in to view attached files.

Replace the code with this one,

div.basel-hover-alt .product-title,
div.basel-hover-alt .price {
	text-align:center;
}

div.basel-hover-alt .wrap-price {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
   -webkit-box-align: center;    
	-ms-flex-align: center;    
	align-items: center;
}

Hi the code works well.

However, I got an issue at category page.
Product supposed shown 4 column in a row but now it becomes 1 column 1 row.
Can you advise?

http://bcocloud.com/beaubelle/skin-care/category/

Hi,

I removed the code
.product-grid-item {
margin-bottom: 50px;
width: 100%;
}

Then it works fine.
However it bring another issue which is the

Product (woocommerce)
http://bcocloud.com/beaubelle/product/smooth-balancing-tonic-200ml/
Please check the error in red circle.

Please reply me soonest possible.
Many thanks

Attachments:

You must be logged in to view attached files.

Hi,

Try to add some custom CSS class to the row or column with product on your home page and use the following CSS

.my-custom-class .product-grid-item {
margin-bottom: 50px;
width: 100%;
}

Regards

Hi, how to centralized this?
Circle in red.

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area in Theme Settings to do this

.basel-products-tabs .products-tabs-title {
    justify-content: center;
}
.basel-products-tabs .tabs-navigation-wrapper {
    padding-right:0;
}

[Author]

Posts