[Resolved] Product Thumbnail Image Size and title length

[Omar]

Dear Team,
Have a good day,

I am sorry to keep bothering you always. I need some assistance related to the product box or I am not sure what does it called.

As you can see, the product box is not arranged well, the title is very large and tall and the image thumbnails are not having the same size. So, is there a CSS that can help to do the required, or are you advising me to use any certain plugin?

[Tom]

Hi there,

You should be able to crop the images so they’re the same size in Customize > WooCommerce > Product Images.

As for the product title, you can reduce the font size in Customize > Typography > WooCommerce.

Let us know if you need more info 🙂

[Omar]

Thank you Tom for your kind response,

Is there a way to align the product title to the side? (right or left depending on the languages). Also, is it possible to add the brand name above the product title? The last thing, is there a way to align the button ‘Add to Cart’ to the center? (Example is attached)

Another issue that is the products that have more than one line’s title has a larger margin to the bottom. (Example is attached)

[Tom]

You can find text alignment in Customize > Layout > WooCommerce as well.

It should align to the right when using RTL by default. If not, we can provide some CSS to do that.

What’s the brand name and where is it coming from?

As for the alignment, I’m not seeing our standard CSS grid/flexbox layout. Can you disable your caching plugin so we can see where the CSS is coming from?

[Omar]

I am using ‘Perfect Brands for WooCommerce’ plugin and it should be the source of brands. Brands are more than 60 brands. another option that I can apply if it will be easy to add is the categories.

Also, I deactivate all caching plugin currently.

[Tom]

Seems you’re using the shortcode for products, so our regular grid doesn’t apply.

You can try adding this CSS:

.woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
}

.woocommerce ul.products li.product .button {
    margin: 0;
    text-align: center;
}

As for brands, you may need to check with their plugin support to see how to add them to each product in the loop.

[Omar]

Hi Tom,

thank you, the issue is solved but due to this line display: flex; the mobile’s preview changes (products are linked to each other). Now, product images, product title, stars, price and add to cart button is touching the box’s outline, is there a code that can add a margin to all the sides?

The last thing, is there a way to change the Menu Item (Login | Register) as I am using a login/logout plugin and I would use it at the right side instead.

[David]

Hi there,

try adding this CSS to put some space between columns:

@media(max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product {
        width: calc(48% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }
}

[Omar]

Thank you David. it is resolved but remaining the navigation bar:

– I would like to change the pre-set menu items (Contact – Login | Register), as showing in the following image it is aligned to the right, I would like to change it with another item. Where I can do that?

– I use the following code to align the WPML widget items while sticky nav transform: translateY(15%); while i am at the top page the items are margin to down but when i croll down it looks great, without the code the opposite is happening.

– Also, the items in English is set to right which is good but in RTL language it remains the same (on the right) due to this code float: right; without this code the navigatio will have another row and the items of the widget will be at the top row. (image below)

[David]

Can you raise a new topic as this issue is unrelated – it makes easier for people to track solutions.

[Omar]

Sure thank you.

[David]

TY

[Author]

Posts