Getting rid of product shadow and title align with price

[jamieandrade88]

Hello,

I want to remove the shadow that is located in the bottom of each product and I would also like to have the title in the same row as the price.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this css code :-

.woocommerce ul.products li.product figure {
    box-shadow: none !important;
}

Thanks
Mohammad

[jamieandrade88]

Thank you so much that did it for the shadow. Do you have one so the name of the product can be on top the price? Sort of like this for

Attachments:

You must be logged in to view attached files.

[jamieandrade88]

here is another example

Attachments:

You must be logged in to view attached files.

[jamieandrade88]

I wanted to do it for the product list as well like the example below

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce div.product .entry-title {
    display: block;
    text-align: right;
    width: 68%;
    font-size: 20px;
}

ul.products li.product .product-details{
    text-align: center !important;
    width: 100% !important;
}
ul.products li.product .price, .woocommerce ul.products li.product .price {
    float: right !important;
    font-size: 18px;
    float: none !important;
    text-align: center;
}

Thanks
Mohammad

[jamieandrade88]

It worked, except for the price isn’t centered on the full product description page.

Attachments:

You must be logged in to view attached files.

[jamieandrade88]

Here is a better picture.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Is that for this product, I don’t see it? http://www.balloonandpaper.com/product/black-tie/

Thanks.

[jamieandrade88]

Its all products that don’t align I have temporary removed the title on top of the price because I couldn’t figure it out, but ideally I would want the title to be right above the price and centered. I found a code in the forum but when I I viewed it on a cell phone it did not align it was way off.

[jamieandrade88]

This is the code I am currently using

.woocommerce div.product .entry-title {
display: block;
float: right;
width: 48%;
text-align: left;
font-size: 26px;
margin-bottom: 30px;
}
@media (max-width: 600px) {
.woocommerce div.product .entry-title {
float:left;
}
}

[Mohammad – SUPPORT]

Hi,
Please replace this code:-

@media (max-width: 600px) {
.woocommerce div.product .entry-title {
float:left;
}
}

With this code:-

@media only screen and (max-width: 600px) {
.woocommerce div.product .entry-title {
float:left;
}
}

Everything looks perfect to me. Please check the attachment.

Thanks
Mohammad

Attachments:

You must be logged in to view attached files.