Home Forums Themes Support Claue Few questions to clean the Mobile device website

Topic Resolution: Resolved
Viewing 14 reply threads
  • Author
    Posts
    • #37096
      Nina M
      Support 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.
    • #37104
      Harry
      Support 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

    • #37136
      Nina M
      Support 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.
    • #37152
      Harry
      Support 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

    • #37213
      Nina M
      Support 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.
    • #37222
      Harry
      Support 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

    • #37224
      Nina M
      Support 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.
    • #37242
      Harry
      Support 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

    • #37352
      Nina M
      Support 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.

    • #37355
      Harry
      Support 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

    • #37357
      Nina M
      Support 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

    • #37359
      Harry
      Support 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

    • #37366
      Nina M
      Support 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

       

    • #37370
      Harry
      Support 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 1 week, 2 days ago by Harry.

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

    • #37374
      Nina M
      Support Expired

      Hi Harry,

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

Viewing 14 reply threads

You must be logged in to reply to this topic.