Docs

[markwest]

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

[markwest]

This reply has been marked as private.

[Darshana]

This reply has been marked as private.

[markwest]

This reply has been marked as private.

[Lely]

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.

[markwest]

This reply has been marked as private.

[Paul R]

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.

[markwest]

This reply has been marked as private.

[Jade]

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.

[markwest]

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

[markwest]

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

[Rad]

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!

[markwest]

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

[Rue Nel]

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.

[Author]

Posts