Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1358657

    Hi
    I am setting up some basic ecommerce on my website and I am having some styling issues with Woocommerce that I an hoping you can help me with.
    If you go to the URL below you will see a couple of test “products” I have added to my site.

    1. Click on one of the images. In the next screen, how do I hide :
    – the SEARCH box
    – The Archives, Categories and Meta fields/sub-fields ?

    2. Choose a “resolution” then ADD To CART

    3. How do I change the background colour of the ‘Continue shopping” button ? It looks disabled as is.

    4. You should now have the mini-cart icon top right corner of header
    – It’s very close to the edge of the browser window and looks cut off. How do I move it slighty to the left ?

    5. Hover over the mini-cart in the header
    – How do I make the grey background semi transparent (50%)
    – How do I change the colours of the prices and the sub total from the default white colour ?
    – How do I change the “Subtotal” label from Orange colour to black ?

    6. Click the VIEW CART link
    – you ar etaken back to the cart but the “Continue Shopping” button is missing. How Do I ensure it is always available in the Cart ?

    This is not urgent at all….

    Tx in advance

    Ivan

    #1358745

    Hey ivanglaser,

    Thank you for the inquiries.

    1.) The default widgets are displaying because the Single Product Pages widget area in the Appearance > Widgets panel is probably empty. Try to add any widgets in the widget area.

    2-3.) You can use this css code to adjust the color of the button.

    #top div.woocommerce-error a.button, #top div.woocommerce-message a.button {
        color: #fff;
        background: #c3512f;
    }
    

    4.) This css code should adjust the position of the mini-cart icon.

    .html_visible_cart .cart_dropdown {
        right: 0;
    }
    

    Default right value is -2px.

    5.) Use this to adjust the styles of the elements in the mini cart.

    #top .header_color .cart_dropdown .dropdown_widget .widget_shopping_cart_content {
        background: rgba(255,255,255,0.5);
    }
    
    .header_color .cart_dropdown .dropdown_widget {
        color: red;
    }
    
    .header_color .cart_dropdown .dropdown_widget li a {
        color: blue;
    }

    6.) You can use this snippet to add a back to shop button above the cart table.

    // https://gist.github.com/bradleysa/7d1448253097784daf94

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

    #1358749

    Hi Ismael. Thank you . It all works well !

    With regards to “5” which is teh styling of the elements in the mini cart

    – when I mouse over a product in the mini-cart, the mouse-over colour is dark grey. How do I change that colour ?
    – How can I add a thin border around the cart ?

    Thanks for your help !

    Ivan

    #1358764

    Hi,

    Glad to know that the changes are working.

    To adjust the color of the mini cart item on hover, use this css code.

    div .dropdown_widget .cart_list li:hover {
        background-color: crimson;
    }
    

    And to add a border, please add this code.

    #top .header_color .cart_dropdown .dropdown_widget .widget_shopping_cart_content {
        background: rgba(255,255,255,1);
        border: 1px solid burlywood;
    }
    

    Best regards,
    Ismael

    #1358777

    Thank you for your invaluable help ! It all works well

    I have a few other questins but I wil start a new thread.

    Ivan

    #1358794

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    #1358835

    You can close this. Thanks again for the help

    #1358846

    Hi ivanglaser,

    We are happy to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Woocommerce styling issues’ is closed to new replies.