Logo Spacing and extra Compare/Wishlist button on Woocommerce site

Hi

I've just finished building a draft woocommerce website on http://farzan.uk and need help on

1. How do I create a bit more space between the logo and the search box next to it
2. Bizarely, on the product pages, it shows the wishlist and compare button twice - how do I get rid of the ones on the second line.

I'm guessing this will be css code?

Thanks
Farzan

  • Nithin
    • Support Wizard

    Hi Farzan Ahmed,

    Hope you are doing good today. :slight_smile:

    That's really odd that the buttons are appearing twice, please try disabling autopmitize plugin, and see whether that helps. If not, please try the following CSS code, which will add spacing to the logo, and will remove the extra buttons:

    .search-container {
    	padding-left: 5% !important;
    }
    
    div.row.product-view > div > div > div.yith-wcwl-add-to-wishlist {
    	display: none;
    }
    
    div.row.product-view > div > div > .compare {
    	display: none !important;
    }

    However the use of !important declaration is not something which I would recommend, but in some cases's it's necessary to apply these rules to overwrite the existing styles.

    You can add the above CSS code, either using a Child theme, or a plugin like Simple Custom CSS.

    Please let us know if you still need any further assistance. Happy New Year. :slight_smile:

    Kind Regards,
    Nithin

  • Farzan Ahmed
    • The Crimson Coder

    Thanks Nithin

    I'm ok thanks- hope you are too, and hope you have a joyous 2017.

    I disabled the autoptimize plugin and added the code, the logo issue was sorted but the buttons are still showing twice.

    I've granted support access if you want to take a look in the backend?

    Thanks
    Farzan

  • Nithin
    • Support Wizard

    Hi Farzan Ahmed,

    This is a bit odd, the CSS related to extra buttons weren't working in the Custom CSS section of your theme, as the CSS wasn't being applied in the front end. Not sure what could be the reason for that, I have added the following CSS in the Customizer, located under Appearance > Customize > Additional CSS, and now your page seems to work fine:

    div.row.product-view > div > .single-product-info > .yith-wcwl-add-to-wishlist {
    	display: none;
    }
    
    div.row.product-view > div > .single-product-info > .compare {
    	display: none !important;
    }

    The above CSS is just the same as previous code, please check, and see whether everything works fine now. Have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.