Ethos shop styling product page gallery layout

[rrk3311]

Hello wonderful readers. I am a somewhat experienced X user. In the past I was able to edit the shop page however it was with FTP and I do not with to go this route. I was wondering if anyone can help me with changing the style of the ethos shop page.

The default theme has a hover function that I would like to totally remove & it layers the titles over the products, this looks bad. I wanted to see if someone can help me with code to change this Ethos store:
https://successchemistry.com/shop/

And make the product thumbnails look like this:
https://i2.wp.com/successchemistry.com/wp-content/uploads/2018/08/Screen-Shot-2018-08-17-at-12.47.56-AM.png?ssl=1&w=450

Except without the add to cart button. This is the default look in storefront, I just do not want to use storefront anymore.

The other thing I was curious about was just a better on page gallery layout. The current one makes thumbnails lay over the product and the magnifying glass is hard to notice or use for new people.
It can also look like the default storefront that does a great job on placing the images below the product.

Right now I have to use a theme cloner to use only product pages and pull them from storefront, however It makes the footer not match etc, many things and I would rather be using x.

Thanks for looking into this. I was on the forums looking for answers and was not able to find something specific. I do think many people are and will be looking for a similar solution to my questions.

.-=MANY THANKS!

[ruenel]

Hello There,

Thanks for writing in!

Do you want something like this? http://prntscr.com/kklag7
If that is the case, you may use this code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r) as an example for you to get started with:

.x-ethos.woocommerce li.product .entry-wrap {
    position: relative;
    top: auto;
    left: auto;
}

.x-ethos.woocommerce li.product .entry-wrap:before {
    display: none;
}

.x-ethos.woocommerce li.product .entry-header h3 a,
.x-ethos.woocommerce li.product .entry-header .price>.amount, 
.x-ethos.woocommerce li.product .entry-header .price>ins>.amount {
    color: black;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer or someone who is familiar with customizing the X theme.

Best Regards.

[rrk3311]

Fantastic Results that worked grrrrrrrrrreat!

[Prasant]

You are most welcome.