Home › Forums › Themes Support › Claue › Few questions to clean the Mobile device website
- This topic has 14 replies, 2 voices, and was last updated 3 years, 10 months ago by Nina M.
-
AuthorPosts
-
-
June 25, 2020 at 9:21 pm #37096Nina MSupport Expired
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. -
June 25, 2020 at 10:50 pm #37104HarrySupport Expired
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 -
June 26, 2020 at 5:45 pm #37136Nina MSupport Expired
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. -
June 26, 2020 at 11:14 pm #37152HarrySupport Expired
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 -
June 29, 2020 at 3:17 pm #37213Nina MSupport Expired
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. -
June 29, 2020 at 5:22 pm #37222HarrySupport Expired
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 -
June 29, 2020 at 6:39 pm #37224Nina MSupport Expired
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. -
June 29, 2020 at 9:22 pm #37242HarrySupport Expired
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 -
July 6, 2020 at 5:12 pm #37352Nina MSupport Expired
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.
-
July 6, 2020 at 10:01 pm #37355HarrySupport Expired
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 -
July 6, 2020 at 11:08 pm #37357Nina MSupport Expired
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
-
July 6, 2020 at 11:46 pm #37359HarrySupport Expired
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 -
July 7, 2020 at 5:55 am #37366Nina MSupport Expired
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
-
July 7, 2020 at 8:14 am #37370HarrySupport Expired
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, 10 months ago by Harry.
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
July 7, 2020 at 4:40 pm #37374Nina MSupport Expired
Hi Harry,
Perfect ! It is exactly what we are waiting for, thanks a lot
-
-
AuthorPosts
You must be logged in to reply to this topic.