Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1297273

    Hi as much as I have tried to find the way to shrink the size of the quantity box on the product page I end up shrinking every other box on the website. Can you point me in the right direction please
    Thank you
    Richard

    #1297699

    Hey Richard,

    Please try the following in Quick CSS under Enfold->General Styling:

    .single-product input.plus, .single-product input.minus, .single-product input.qty ​{
       ​width: 33px;
       ​height: 33px;
    }

    Best regards,
    Rikard

    #1297751

    Hi Rikard
    Thanks for your reply. No that did not work. Frustrating isn’t it. I’ve been racking my brains over this one :)
    Regards
    Richard

    #1297813

    Hi,
    Please try this and clear your browser cache:

    #top #main .single-product-summary .quantity input.plus, 
    #top #main .single-product-summary .quantity input.minus, 
    #top #main .single-product-summary .quantity input.qty {
       width: 33px;
       height: 33px;
       line-height: 33px;
    }

    Best regards,
    Mike

    #1297823

    Hi Mike
    Thanks for trying but that did not work either. It’s nice to know that experienced coders are having a problem with this one. I thought it was just me 😊
    Regards
    Richard

    #1297996

    Hi,
    Well I don’t see that you have the css applied to your site right now, but when I inject it via the browser this is how it looks:
    2021-05-03_073535.jpg
    Please try the css in the WordPress > Customize > Additional CSS field as it has priority
    2021-05-03_074210.jpg

    Best regards,
    Mike

    #1298107

    Hi Mike
    I am sorry that is my fault. I should have been more specific about the qty boxes I needed help with. It is the 2 boxes under the words “Add quantity required”. They are qty boxes I was talking about. They are on every product page.
    Regards
    Richard

    #1298287

    Hi,
    Well that makes more sense 😊
    Please try this css then:

    #top #main .single-product-summary .wc-pao-addon-wrap > .wc-pao-addon-input-multiplier {
       width: 43px;
       height: 43px;
       line-height: 43px;
    }

    and clear your browser cache and any caching plugin, you will note I didn’t use !important; in the css because I didn’t think it was neassary, but if you have trouble you can use it like this:

    #top #main .single-product-summary .wc-pao-addon-wrap > .wc-pao-addon-input-multiplier {
       width: 43px !important;
       height: 43px !important;
       line-height: 43px !important;
    }

    and if you still have trouble try the css in the WordPress > Customize > Additional CSS field as it has priority.

    Best regards,
    Mike

    #1298398

    Hi Mike
    Perfect…thank you.
    One last quick question. I am going to add a value of 0 to the qty boxes by using this JS code

    jQuery(document).ready(function(){
        jQuery('.wc-pao-addon-custom-price').val("0");
    });/

    But there is no point adding it to every product page. So I would need to create a JS file and place it in there.
    Am I correct?
    Regards
    Richard

    #1298604

    Hi,
    Glad that helped, if I understand correctly it would not matter if it was a JS file that you linked to or the script added directly, both will still be loaded anytime the class wc-pao-addon-custom-price is found, but I believe what you want to do is to limit the searching of that class, and thus the JS overhead related to it.
    I recommend adding the page class of single product pages that will contain the wc-pao-addon-custom-price class, by adding the top most page class the JS will stop looking for your class sooner instead of searching the whole page.

    jQuery(document).ready(function(){
        jQuery('#top.single-product .wc-pao-addon-custom-price').val("0");
    });

    Now with that expectation I do not see your class wc-pao-addon-custom-price on the test page we have been looking at, so if it is another page or a cart page you would want to use the topmost page class for that page. I hope that makes sense.

    Best regards,
    Mike

    #1299271

    Hi Mike
    Thank you for that info.
    Regards
    Richard

    #1299333

    Hi,
    Very good, shall we close this then?

    Best regards,
    Mike

    #1299339

    Hi Mike
    Yes please
    Regards
    Richard

    #1299359

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Change size of a Qty box on product page’ is closed to new replies.