Customizing woocommerce

  • Resolved yurayne

    (@yurayne)


    2 years, 4 months ago

    Hi, I’m new to the blocks, I’ve used the DIVI theme before, but it makes my website very slow, I’m trying to change, so far everything is fine, but I can’t differentiate the size of the prices on the product page, they all change at the same time and I need some to look bigger than others, in CSS I see that there are some presets that assign the “Large” size to the “font-size” of the price.
    Could someone explain how to modify this?
    Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter yurayne

    (@yurayne)

    I found these, but I still don’t know how to use it

    https://github.com/WordPress/twentytwentythree/blob/trunk/DESIGN-SPEC.md

    This is the CSS from the Twenty Twenty-Three theme that defines the font size for the price on the product page:

    
.woocommerce div.product .entry-summary .price,
.woocommerce div.product .entry-summary .woocommerce-Price-amount,
.woocommerce div.product .entry-summary del {
  font-size: var(--wp--preset--font-size--large);
}

    To change the size to another of the theme’s font size, change the “large” part of the size variable to either “small”, “medium”, “x-large”, or “xx-large”.

    For example, custom CSS to change to “small” size:

    
.woocommerce div.product .entry-summary .price,
.woocommerce div.product .entry-summary .woocommerce-Price-amount,
.woocommerce div.product .entry-summary del {
  font-size: var(--wp--preset--font-size--small);
}

    The custom CSS can be added in the “Additional CSS” section of the old style customizer. To access this, add customize.php to the end of your dashboard admin URL, e.g. https://www.yoursite.com/wp-admin/customize.php

    Thread Starter yurayne

    (@yurayne)

    Thanks, but that changes the size of all the prices on the product page.

    Can you please provide more detailed information about “all the prices”, as there is usually just the one price displayed at any one time for a single product (without variations).

    Products with variations usually only show the price range below the product title and then the variable price above the add-to-cart button when the variable is selected.

    Do you mean you want the main price below the title and the selected variable price to be different sizes? Or something else?
    Would you be able to provide a link to one of your products so I can take a look and advise further. Thanks.

    Thread Starter yurayne

    (@yurayne)

    Hello,
    Here is the link to one of the products on my staging site:

    https://misterstudio.com/1667327982109/product/merry-fucking-christmas-grinch-christmas-15-oz-mugs/

    I need the prices on the quantity table to be on the medium size, and the rest as it is.

    Thanks

    Thanks I see it now in the bulk pricing table from the Discount Rules and Dynamic Pricing for WooCommerce plugin

    This custom CSS should do it:

    
.woocommerce div.product .entry-summary .wccs-bulk-pricing-table-container .woocommerce-Price-amount {
  font-size: var(--wp--preset--font-size--small);
}
    Thread Starter yurayne

    (@yurayne)

    Perfect, Thank you so much.
    Have a nice week end.

    Thread Starter yurayne

    (@yurayne)

    Weekend

    Moderator Kathryn Presner

    (@zoonini)

    @yurayne Glad @uxl was able to help you out!

    I’ll mark this thread as resolved.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Customizing woocommerce’ is closed to new replies.