Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 13, 2022 at 1:46 pm #1335418
    Art_Discovery

    Hi there,
    I have a woocommerce product which is created using the avia layout builder, and wish to utilise the product purchase button under the plugin additions tab. How can I:-
    1. Alter the font size of the price and price symbol only
    2. totally remove the div. quantity section, or limit it to one in this section.
    Its important this is for this product only

    Refer to the attached screenshots to see what I mean. many thanks

    January 13, 2022 at 3:05 pm #1335431
    Yigit

    Hey,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
.single-product .price bdi,
.single-product .price bdi span { 
     font-size: 16px;
}
.single-product .quantity { 
     display: none; 
}

    If that does not help, please create temporary admin logins and post them here privately so we can look into it :)

    Best regards,
    Yigit

    January 28, 2022 at 11:52 am #1337684
    Art_Discovery

    Sorry Yigit, this did not work.
    The feature is now live, so I wonder if you can help urgently.
    Link to page in private content below. To recap we have utilised the avia layout builder for a woocommerce product – the product purchase button (from the plugin additions tab) is aligned left by default and I cant seem to alter it. How can I centre the product purchase button content detail within the div, and enlarge the font?
    Many thanks

    January 29, 2022 at 4:42 pm #1337840
    Mike

    Hi,
    Thank you for the link to your page and the screenshots, when I check your page I see this, so it seems that the hiding of the quantity section is working
    2022-01-29_003.jpg
    please try this css instead:

    #top.single-product .price span.woocommerce-Price-amount,
#top.single-product .price span.woocommerce-Price-currencySymbol{ 
     font-size: 20px;
}
#top.single-product .quantity { 
    display: none; 
}
#top.single-product .av-woo-purchase-button .cart {
	float: none;
    display: inline-flex;
    margin-bottom: 0;
}
#top.single-product .first-payment-date {
	margin: 0;
}

    the expected results:
    2022-01-29_004.jpg
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 1, 2022 at 2:10 pm #1338234
    Art_Discovery

    Hi Mike
    Thanks for this but it unfortunately did not work. The sign up button appears as you expected, but there is not change to font size.
    I would like the whole div center aligned. When I look at inspect element and make the changes below it works but not in custom css.:-

    .av-woo-purchase-button av-av_product_button-3cd9da5fea0ef5fb27aee617571c39a3 avia-builder-el-11 el_after_av_textblock avia-builder-el-last {
    margin: auto;
    width: 50%;
    text-align: center;
    }

    Also, the code you gave :-
    #top.single-product .quantity {
    display: none;
    }
    … This wasn’t what made the changes to the quantity section – I removed this by applying the woocommerce inventory setting to only permit one item purchase for this subscription product

    What next?
    Thanks

    February 2, 2022 at 3:16 am #1338341
    Mike

    Hi,
    Thanks for the feedback, as I understood you wanted to change the £30.00 font size, like in the screenshot above, correct?
    If so this css is still working in my tests:

    #top.single-product .price span.woocommerce-Price-amount,
#top.single-product .price span.woocommerce-Price-currencySymbol{ 
    font-size: 20px;
}

    try checking that this was copied correctly, or perhaps you have a css error before this, try adding it to the WordPress ▸ Customize ▸ Additional CSS field to check.
    To center the div try this css:

    #top.single-product #subscription_product_id > .av-woo-purchase-button.avia-builder-el-last {
	text-align: center;
}

    here is a screenshot of my test of these two rules, note the £30.00 font is larger and the div is centered:
    2022-02-01_005.jpg
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 3, 2022 at 3:52 pm #1338721
    Art_Discovery

    That’s done the trick Mike. Thank you so much for your help!

    February 3, 2022 at 4:01 pm #1338723
    Yigit

    Hi,

    We are glad that Mike could help! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘add to card button : remove div.quantity and enlarge p.price’ is closed to new replies.