#130593 Cart Quick View Styling; Other Small WooCommerce Issues

Landing Forums JupiterX WordPress Theme Cart Quick View Styling; Other Small WooCommerce Issues

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Trent Flory

    Hello, I have a few questions about styling with WooCommerce. I have configured every WooCommerce section to be uniform (Product list, checkout, cart, shop page, etc.), but for some reason I cannot figure out how to style the Cart Quick View. I am mostly needing to style the button to look like the other buttons within the site. The generic blue is a bit of a turn-off when compared to the rest of the site.

    The second question is about the search bars on the header and footer. Basically when you are on any non-WooCommerce page, the search bars look as they should, but when you are on a WooCommerce page (Shop Page, Checkout, Product Page), the search bars show a white background with a light gray border, and a slight border radius that does not match up with the styling I have set. Wondering if there is some code or something to be rid of that, as it doesn’t look ideal.


    Nodari Support Team

    Hi Trent

    Here is the CSS code that can fix your problems, please add them in the Appearance > Customize > Additionally CSS

    /* Normall */
    .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .jupiterx-wc-loadmore {
        background-color: #af870d;
        border: 1px solid #af870d;
    /* hover */
    .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus, .woocommerce a.button:hover, .woocommerce a.button:focus, .woocommerce button.button:hover, .woocommerce button.button:focus, .woocommerce input.button:hover, .woocommerce input.button:focus, .woocommerce .jupiterx-wc-loadmore:hover, .woocommerce .jupiterx-wc-loadmore:focus {
        background-color: #af870d;
        border-color: #af870d;
    /* Search bar fix */
    .woocommerce-page .jupiterx-primary input:not(.jet-range__slider__input), .woocommerce-page .jupiterx-primary textarea, .woocommerce-page .jupiterx-primary select, .woocommerce form input:not(.jet-range__slider__input), .woocommerce form textarea, .woocommerce form select {
        border: 0px solid #ced4da !important;


Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.