Few questions to clean the Mobile device website

[Nina M]

Hello,

We have some issues only on the Mobile device view.

1/ On the product detail page, we would like to have the quantity information and the “Add to cart” button like before. Please see our 2 screenshots, before and now. Could you please help us to obatin the previous apparence ?

2/ On the cart page, we have 2 issues :
– First, the “x” button, to delete one product in the cart is very big. Could you please help us to reduce it like it is on the Computer device view.
– Second, we would like all the red part and button “buy the cart” to be before the “You may be interested in”. Could you please help ?

Thanks a lot for your help

Nina M.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Nina,

1,2. Please add below code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 480px) {
form .quantity {
	width: 100%;
	margin: 0 0 10px;
}
form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	width: calc(100% - 55px);
}
.shop_table .product-remove {
	font-size: 20px;
}
.cart-collaterals {
	display: flex;
	flex-direction: column-reverse;
}}

Kind regards

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

[Nina M]

Hi Harry,

Thanks for these codes.

1/ On the product detail page, please see how it is now. We would like “quantity”+”Add to cart” button +”the heart” on the same line, like the screenshot “Before” please.

2/ On the cart page, second point is okay now, thanks !

For the first issue : we would like quantity as small as it was yesterday, but the “x” button to delete on the right side, in the same line of Quantity. Is it possible ? We don’t want a big “x” delete button.

Thanks for your help

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please change prev code to

@media only screen and (max-width: 480px) {
form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
	padding: 0 15px;
	font-size: 13px;
}
.shop_table .product-remove {
	font-size: 20px;
}
.cart-collaterals {
	display: flex;
	flex-direction: column-reverse;
}}

2. I’m sorry it can’t do like as you want.

Kind regards

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

[Nina M]

Hi Harry,

1/ With this code we have again the apparence from the 25th June “NOW”, not the “BEFORE” one that we want, please see our screenshots. Quantity is too big, could you please help to come back like the screen “BEFORE” ?

2/ Ok so is it possible in the cart to delete the product by reducing the quantity ? Thus when we have 1 product in the cart and we click on the “minus” sign in quantity -> we get 0 quantity ?

Thus we also can delete the “x” button.

Thanks for your help

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. I just add code on 26 and it work.

2. I’m sorry the WooCommerce doesn’t support it.

Kind regards

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

[Nina M]

1/ Sorry, we don’t nderstand your answer. We add te code you gave us on 26th June and please see what we have now. We would like “quantity”+”Add to cart” button +”the heart” on the same line, like in the screenshot “BEFORE” please.

2/ Is there anyway to reduce the delete button ? Our clients don’t understand what it means actually…

Thanks for your help

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. I check on my phone it work well, please clear cache and check again

2. I’m sorry it’s feature of WooCommerce.

Attachments:

You must be logged in to view attached files.

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

[Nina M]

Hello Harry,

Hope you are fine.

About 1. issue, still pending :
It still does not wor for us, on any mobile devices we have, even after clearing cache.
We are now working only on : https://www.ninamikha.fr/.

Could you please indicate us what to do

Thank you so much

Nina M.

[Harry]

Hi Nina,

Please add more code

@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 800px)  {
	.single-product div.product .stripe-enabled form.cart .quantity {
		width: auto;
		margin-right: 15px;
	}
}

Kind regards

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

[Nina M]

Hi Harry,

Perfect, this code works and it is like we want now, thanks a lot !

About our 2/ issue, the “X cross” delete button in the cart on Mobile devices, is it possible to add before the “X” a word, like “Delete” for instance ?
Our clients don’t understand this delete button and it’s a shame…

Thanks again for your support

[Harry]

Hi,

Please add more code

@media only screen and (max-width: 736px) {
.product-remove a.remove {font-size: 20px;}
.remove::after {
	content: 'delete';
	font-size: 18px;
	margin: 0px 0 0 5px;
	position: relative;
	top: -2px;
}}

Kind regards

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

[Nina M]

Hi Harry,

Thanks a lot, now it’s clear for our customers.

No way to delete the “x” symbol, right ? Because we prefer only text if it’s possible

 

[Harry]

Hi Nina,

Please change code to

@media only screen and (max-width: 736px) {
.product-remove a.remove {
	font-size: 14px;
	text-indent: -999em;
	position: relative;
	display: inline-block;
	width: 100%;
	text-align: center;
}
.remove::before {
	content: 'Retirer du panier';
	font-size: 14px;
	margin: 0;
	top: 3px;
	text-indent: 0;
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	line-height: 15px;
}}

Kind regards

• This reply was modified 3 years, 9 months ago by Harry.

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

[Nina M]

Hi Harry,

Perfect ! It is exactly what we are waiting for, thanks a lot

[Author]

Posts