[Resolved] Product Thumbnail Image Size and title length

Home Forums Support Product Thumbnail Image Size and title length

  • This topic has 11 replies, 3 voices, and was last updated 1 week, 1 day ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1435665
    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?

    #1435872
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1436827
    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) Example

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

    #1437277
    Tom
    Lead Developer
    Lead Developer

    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?

    #1437905
    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.

    #1438575
    Tom
    Lead Developer
    Lead Developer

    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.

    #1441896
    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?
    Mobile

    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.
    Login

    #1442199
    David
    Staff
    Customer Support

    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;
        }
    }
    #1450399
    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)

    #1450774
    David
    Staff
    Customer Support

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

    #1450946
    Omar

    Sure thank you.

    #1451431
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.