Okay
  Public Ticket #3401670
Shop styling
Closed

Comments

  •  16
    Soluforyou started the conversation
    June 27, 2023 at 10:45am

    Hi there!
    How can I style the following (see screenshot)

    1) The line width and the size of the circles (< solved)
    2) the square line stroke smaller
    3) On the right: that button as a pill


    ____update___

    point 1 is solved with this code:

    /* SHOP Price filter more elegant */
    .wc-block-components-price-slider__range-input-wrapper:before{
        background:transparent !important;
    }
    .wc-block-components-price-slider__range-input-progress{
        height:2px !important;
        top:-50% !important;
    }
    div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
        height:4px;
        width:4px;
    }

    Attached files:  Screenshot 2023-06-27 at 12.43.23.jpg

  •  2,958
    Andrew replied
    June 27, 2023 at 12:25pm

    Hi there,

    2) Use this CSS:

    .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{
    border:1px solid black !important;
}

    3) Use this CSS:

    .woocommerce .woocommerce-ordering select{
    border-radius:50px !important;
}

    Cheers.
    Noah.

  •  16
    Soluforyou replied
    June 28, 2023 at 4:32am

    Thanks, that worked perfectly!

  •  16
    Soluforyou replied
    June 28, 2023 at 6:14am

    And how can I style the prices and the quantities? Where in Salient is that? See screenshot:

    Attached files:  Screenshot 2023-06-28 at 08.09.02.jpg

  •  1,877
    Judith replied
    June 28, 2023 at 7:57pm

    Hi there,

    Please try this css:

    .woocommerce div.product .summary p.price {
        font-size: 21px;
    }
.entry-summary .cart .quantity input.qty {
        font-size: 17px;
    }

    Thanks.


  •  16
    Soluforyou replied
    June 30, 2023 at 6:38am

    Hi Judith, that worked well, but ofcourse changes everywhere. 

    > On a product page it looks great (what I wanted): https://soluforyou.com/product/eye-cream/

    > But on the home page, in the carrousel, the prices are incredible small suddenly: https://soluforyou.com/

    See screenshot. How can change the price size of ONLY the carrousel on home of the shop?

    Attached files:  Screenshot 2023-06-30 at 08.37.32.jpg

  •  2,958
    Andrew replied
    June 30, 2023 at 8:22am

    Hello again,

    Thank you for getting back to us.

    Try adding this CSS and let us know how that goes.

    .home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price, 
.home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount {
  font-size: 18px !important;
}

    Kind regards,

  •  16
    Soluforyou replied
    June 30, 2023 at 8:39am

    Hi Andrew, thanks. So now the prices on home look great, but the prices on the Product page seem unchanged
    yes I deleted my cache. 

    How can I make the product page pricing now smaller? 
    https://soluforyou.com/product/eye-cream/

    See screenshot, red square. 

    Also I like to make the product title bigger, see blue square. How do I change this? 

    Attached files:  Screenshot 2023-06-30 at 10.37.21.jpg

  •  2,958
    Andrew replied
    June 30, 2023 at 8:56am

    Hello there,

    Thank you for reaching out to us.

    Try changing this in the theme option by going to salient > typography> nectar specific elements and changing this.

    6837926236.png

    As for the price font size, add this into the Custom CSS box in your Salient Theme Options panel:

    .single-product .woocommerce div.product .summary p.price {
  font-size: 18px;
}

    Thanks

  •  16
    Soluforyou replied
    June 30, 2023 at 10:33am

    I tried both, it's not what I meant yet. Some things good now:

    > The WooCommerce Product Title influences only the products on the carrousel at home. 

    > The size of the product info when clicked on a product however, is not changed > help me as its to small. Check 'Toner' on the left at: https://soluforyou.com/product/toner/
    I want it bigger there (for all products).


    > Then the pricing ON THE PRODUCT pages (not home) The following CSS is not working:

    /* SHOP Price smaller product page  */
    .home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price, 
    .home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount {
      font-size: 17px !important;
    }

    /* SHOP Price test what is this  */

    .single-product .woocommerce div.product .summary p.price {
      font-size: 14px;
    }

  •  2,958
    Andrew replied
    June 30, 2023 at 12:45pm

    Hello there,

    Thank you for getting back to us.

    1. You can add this CSS to change the font size of the product title on the product page.

    .single-product div.product h1.product_title {
    font-size: 32px !important;
}

    2. For the product pricing, this CSS will only work for the product prices on the home page and not on any other pages.

    /* SHOP Price for prices on the homepage */
.home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price, 
.home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount {
  font-size: 17px !important;
}

    3. For the product prices on the product page, you can add this CSS and let us know if it helps.

    /* SHOP Price for prices on product page  */
.single-product.woocommerce div.product .summary p.price {
  font-size: 14px;
}

    I hope that helps.

    Kind regards,

  •  16
    Soluforyou replied
    July 1, 2023 at 6:41am

    Yes, that works! Now I have grip on how it's shown, thanks!!

    Tip: put this in Salient...