Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1144896

    markwest
    Participant

    Hi,

    I’m having some problems trying to get WooCommerce looking how I’d like that I’d really appreciate some help with please.

    Firstly, on the /shop page – I can’t get the featured image for the product to show up above the product title – I’d like this page to show a gallery of the products offered – including a thumbnail image and the base cost please.

    With regard to the cart displayed in the header – I am trying to change the colour to white through the customiser – but it is displaying in red.

    Also, I’d like the cart icon/amount to display in the vertical middle of the navbar (aligned with the other menu items text) over to the right hand side.

    I’ll include login details for the site in a further private message.

    Thanks very much

    Mark

    #1144898

    markwest
    Participant
    This reply has been marked as private.
    #1145432

    Darshana
    Moderator
    This reply has been marked as private.
    #1146010

    markwest
    Participant
    This reply has been marked as private.
    #1146181

    Lely
    Moderator

    Hello Mark,

    Feel free to delete the current Shop page. Then create a new shop page. Go to Woocommerce > Settings > Products Tab> Display Tab: Shop Page: Choose Shop page on the dropdown.

    Hope this helps.

    #1146323

    markwest
    Participant
    This reply has been marked as private.
    #1146480

    Paul R
    Moderator

    Hi Mark,

    Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

    – FTP Host
    – FTP Port
    – FTP Username
    – FTP Password

    Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

    #1146497

    markwest
    Participant
    This reply has been marked as private.
    #1147038

    Jade
    Moderator

    Hi Mark,

    Please add this code in the CSS customizer:

    .woocommerce li.product .entry-featured {
        display: block;
    }
    
    .x-cart .inner, .x-cart .outer span {
        color: #fff;
    }
    
    .x-cart {
        display: inline-block;
        padding-top: 12px;
    }

    Hope this helps.

    #1147048

    markwest
    Participant

    Hi Jade,

    Thanks for your help.

    It feels like I am missing a lot of styling features for the WooCommerce shop page – for example – there is still no pricing detail displayed. I look at the X theme demo pages and they are far nicer in layout than my current page? How can I obtain a layout similar to this perhaps – http://demo.theme.co/shop-renew/ ?

    Thank you also for your help with the CSS for the cart. Please could you help me understand why the settings within the customiser – which are set to white are not taking effect? Is this a bug?

    Also, would you be able to help me position the cart to the right hand side of the menu bar please?

    Thanks very much.

    Mark

    #1147059

    markwest
    Participant

    Hi Jade,
    Regarding pricing detail – I realised it was not fully added for the product variations – now it’s added it is showing up. But I’d still really like nicer styling for the products page if that’s possible please?
    Thanks
    Mark

    #1147621

    Rad
    Moderator

    Hi there,

    What formatting and styling do you wish to apply? The text color or button’s color? Please add this CSS as well,

    .woocommerce li.product .entry-header .price>.amount, .woocommerce li.product .entry-header .price>ins>.amount {
        font-size: 18px;
    }
    .woocommerce .price > .amount, .woocommerce .price > ins > .amount, .woocommerce li.product .entry-header h3 a:hover, .woocommerce .star-rating:before, .woocommerce .star-rating span:before {
        color: #1abc9c !important;
    }

    Then please change your button’s styling at Admin > Appearance > Customizer > Buttons

    Cheers!

    #1147879

    markwest
    Participant

    Hi Rad,

    Thank you again for the reply.

    Maybe I am not being clear. I was hoping that it would be possible to use pre-styled woocommerce pages – i.e. like the demo page http://demo.theme.co/shop-renew/

    I would rather not have to use CSS to entirely craft a page to look how I’d like – this is complicated and time consuming and not why I picked X theme 🙂

    I made an error and deleted the original X theme woocommerce shop page – which I suspect was pre-styled . . .? Is it possible to put that original page back somehow, so that I can use it as my shop base? Rather than trying to style a new shop base page from scratch?

    If that’s not possible, maybe you could recommend a plugin that will help me create a nice looking woocommerce page layout without having to know all the exact CSS – which I don’t?

    Thank you for all your help.

    Mark

    #1147899

    Rue Nel
    Moderator

    Hello Mark,

    I would highly suggest that you add at least 6 products so that you can see the almost outcome of the shop page layout. At the moment, you are in the right direction. You have used Renew stack and may have set the other settings in the customizer, Appearance > Customize > WooCommerce. Our renew shop demo is using fullwidth layout and with two columns in it. It would also matter if you will upload a uniform featured image dimension so that they will be aligned properly.

    I also noticed that you have added a custom css code that removes the space above the shop page. I would want you to update this css code and use this instead:

    .x-container.offset {
        margin-top: 0px;
    }
    
    .woocommerce .x-container.offset {
        margin-top: 2.75em;
    }

    Hope this helps. Please let us know how it goes.