Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Quantity buttons on product page

quantity button on product page
    • 7 years, 1 month ago sd
      Participant

      Expired

      Can you please help me with the following issue in June theme. In mobile layout when you on a product page you have separated “-/+” quantity buttons from the actual field and it looks ugly when it should look like in original, can you explain please why that happens and how to solve that?

      https://ibb.co/hoMtV8

      https://ibb.co/cuHvco

      • This topic was modified 7 years, 1 month ago by sd. Reason: added pics
    • 7 years, 1 month ago sd
      Participant

      Expired

    • 7 years, 1 month ago Mirela
      Participant

      Hello,

      Can i please see a link of the your site?

      Best regards!

    • 7 years, 1 month ago sd
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 1 month ago Mirela
      Participant

      Hello,

      Please try adding this css into your Customize > General > Custom Codes> Custom css:

      .woocommerce .quantity:before {
          right: 42px !important;
      }
      .woocommerce .quantity:after {
          right: 42px !important;
      }

      Change the value until you are satisfied with the result.
      Let us know.

      Best regards!

    • 7 years, 1 month ago sd
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 1 month ago Mirela
      Participant

      Hello,

      Glad to know it worked for you.
      Please know that theme has included third party important files such as woocommerce and thus is depended on Woocommerce changes as well. We try to keep up with these changes and reflect them in every theme release.
      We have taken notice of this and will fix it in the next theme update for sure!

      To set the “Add to Cart” button in line with quantity buttons in mobile, please add this code:

      @media (max-width: 480px){
      .woocommerce div.product form.cart .button {
          margin-left: 0 !important;
          width: 65% !important;
          margin-top: -61px !important;
      }}

      See screenshot: https://postimg.cc/image/j7csns12l/
      Let me know.

      Best regards!

    • 7 years, 1 month ago sd
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 1 month ago sd
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 1 month ago sd
      Participant

      Expired

      Please reply asap! Thank you!

    • 7 years, 1 month ago sd
      Participant

      Expired

      1. How to remove “Add to cart” words and leave just centered cart icon in this case ?

      https://ibb.co/fzEtYT
      2. Can you also tell me what css to use to make that (make quantity and “Buy Now” button on the same row) on all the mobile and tablets, and desktop displays.

      Regards

      • This reply was modified 7 years, 1 month ago by sd.
    • 7 years, 1 month ago sd
      Participant

      Expired

      Up!

    • 7 years, 1 month ago Medrit
      Participant

      Hello,

      1. Sorry for the late reply. Click on Customize and scroll down to the shop section and then click on Shop Tabbed. It will open a menu on the left. Set Product Style to Default. See screenshot: https://ibb.co/fqgUv8

      2. Try this css code into Customizing > General > Custom Codes :
      .single-product .cl-single-add-to-cart-wrapper > .single_variation_wrap > .woocommerce-variation-add-to-cart { display: flex; }
      If you mean something else please provide a screenshot.

      Best regards!

    • 7 years, 1 month ago sd
      Participant

      Expired

      Thank you for reply:

      1. No. I need product style “With Dark Controllers” and remove “Add to cart” words, and left only a button. like here – https://ibb.co/mSGkk8. I want this because all other product styles when used in a mobile layout and 2 products in a row has conflict, the buy now button, expand and like buttons cannot fit the screen of a mobile phone, check that – https://ibb.co/hXYvJT.

      2. I need this result on all the layouts (mobile, tablet and desktop), that “Add to Cart” button was in the same row with Quantity field – https://ibb.co/eWRLv8. Also I have very bad experience with quantity “+/-” buttons, they are always migrating somewhere, not on the right place, please check that – https://ibb.co/nHrFJT

      3. Also, this button is not working, how to solve this – https://ibb.co/eW1qJT

      4. Also, please tell me why this star rating is not fully visible, hidden behind the white background partially  – https://imgbb.com/upload

      5. Why the products not in one line, but they are “dancing” depending on the product name length, what if I need a sraight line everything – https://ibb.co/dt442y

      Thank you for you trying to help,

      • This reply was modified 7 years, 1 month ago by sd. Reason: Added 3rd question
      • This reply was modified 7 years ago by sd. Reason: Added 2 more questions
    • 7 years ago sd
      Participant

      Expired

      Up please!

    • 7 years ago sd
      Participant

      Expired

      Please reply, this minor fixes should be done and I do not need anything else, please just reply how to professionally solve that,

      Thank you

    • 7 years ago Mirela
      Participant

      Hello,

      1-To remove the “Add to Cart” words you need to edit theme files. Go to file functions.php and find this block:

        wp_localize_script(
              'codeless-main',
              'codeless_global',
              array(
                  'ajax_url' => admin_url( 'admin-ajax.php' ),
                  'FRONT_LIB_JS' => get_template_directory_uri() . '/js/',
                  'FRONT_LIB_CSS' => get_template_directory_uri() . '/css/',
                  'postSwiperOptions' => codeless_get_post_slider_options(),
                  'cl_btn_classes' => codeless_button_classes(),
                  'wc_placeholder_img_src' => ( function_exists('wc_placeholder_img_src') ? wc_placeholder_img_src() : '' ),
                  'shop_columns_mobile' => codeless_get_mod( 'shop_columns_mobile', 1 ),
                  'shop_open_toggles' => codeless_get_mod( 'shop_open_toggles', 0 ),
                  'language' => array(
                      'added' => esc_attr__('Added', 'june'),
                      'add_to_cart' => esc_attr__('Add to Cart', 'june')
                  )
      

      Remove just the Add to Cart the text in this line: 'add_to_cart' => esc_attr__('Add to Cart', 'june') and save changes.

      2-Can you please send us a link in private? I need to check this directly to give the right code.

      3-That is not a button. It’s just demo text located in top navigation bar. You can remove it or make it link to your login/register page.

      4-I don’t see any screenshot attached. Please check it and send the screenshot again.

      5-That’s because the height is automatically set up according tot he product height including the image and title.
      Sorry but it’s not possible changing this.
      -You can set up products to be showing in one product per row in Customize > Shop > Shop Page Archive > Shop Column in Mobile (screenshot)

      PS: Please know that we reply to topics according to their arrival time. The oldest first. So by constantly replying to your own ticket you move it up in line and delay the response. We are trying our best to answer to all of you asap. In the mean time we kindly ask for you patience until we can get back to you.

      Best regards!

    • 7 years ago sd
      Participant

      Expired

      Understood, thank you!

      1. Thank you for the trick, but now I have this – https://ibb.co/jZaWHy . But I need to have this – https://ibb.co/iEGGjd . How to make that?

      2. No, unfortunately, NDA is not allowing to do so

      3. What is a login/register page link for standard wordpress I can use, what the link in your theme?

      4. Uploaded the picture – https://ibb.co/nPZrHy. Question – Also, please tell me why this star rating is not fully visible, hidden behind the white background partially .

      5. Please tell me how to remove words “Search your style” inside a search field or change it to some other words suitable me?

      Regards

      • This reply was modified 7 years ago by sd.
    • 7 years ago Mirela
      Participant

      Hello,

      1-Use custom css to re-position the icons to your wish. Add the code into your Customize > General > Custom Codes > Custom Css menu.

      2-The code to add is practically the same i gave you in older replies. This one:

      @media (max-width: 480px){
      .woocommerce div.product form.cart .button {
          margin-left: 0 !important;
          width: 65% !important;
          margin-top: -61px !important;
      }}

      You just have to add it for each media width. Just change the values according to the device. Read this article for more: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

      3-The login/register page is a normal wp page you create and where you add the code for a contact/ login/ register form. The forms can be created using a custom plugin.

      4-Please add this code:

      @media (max-width: 480px){
      .woocommerce ul.products li.product .price {
          width: 53% !important;
      }
      .woocommerce .products .star-rating {
          margin: -7em !important;
          top: 20px !important;
      }
      }

      Screenshot: https://postimg.cc/image/x7witug6f/

      5-You can change the “Search Your Style” directly from files:
      \includes\codeless_builder\header-elements\cl_header_search.php
      \includes\codeless_builder\header-elements\cl_header_tools.php

      Or use the pot file to change it. See this related article explaining how to do it: https://support.ellethemes.com/?ht_kb=translate-site-using-po-mo-files

      Let us know.

      Best regards!

Viewing 18 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password