Okay
  Public Ticket #3540461
Category display
Closed

Comments

  •  5
    Robert started the conversation

    I have 2 websites - www.deadw8.au & www.easyflowassets.com.au both are using Salient theme 16.1.2

    On DeadW8 the categories in the Shop are displayed as per attached image 1 - all the same size, however in Easyflow Assets they display as different sizes - image 2

    Is there a way to make Easyflow Shop categories display the same as DeadW8 Shop?

    I have tried adding images as the same size but that didn't change in the Shop. I have compared settings between the 2 sites and can't find any difference. Both sites were built by the same developer (no longer around) so not sure where there would be a difference.

    Thanks Robert

    Attached files:  DeadW8 Shop.png
      Easyflow Shop.png

  •  1,085
    ThemeNectar replied

    Hey Robert,

    Can you check your settings in the EasyFlow instance and verify that you have the thumbnail cropping option enabled in the WordPress Customizer > WooCommerce > Product Images section:

    4561565855.jpg

    Kind regards

  •  5
    Robert replied

    Hi, yes that is the option that is enabled in both sites. I changed the thumbnail width setting to 100 and the categories all display as the same size but image quality is terrible

  •  8,938
    Tahir replied

    Hey Again,

    Try regenerating the Thumbnails.

    Also view:

    Thanks.


    ThemeNectar Support Team 

  •  5
    Robert replied

    It regenerated the thumbnails when i put the setting back to 300

  •  8,938
    Tahir replied

    Try regenerating them using this plugin: https://wordpress.org/plugins/regenerate-thumbnails/ and check.

    Thanks


    ThemeNectar Support Team 

  •  5
    Robert replied

    That plugin won't load?

    Attached files:  Screenshot 2023-12-11 1.10.15 PM.png

  •  8,938
    Tahir replied

    Try using another similar plugin and check. Also contact your hosting provider if you are having issues with plugin installs.

    Thanks


    ThemeNectar Support Team 

  •  5
    Robert replied

    Hi Tahir, i installed the plugin & regenerated thumbnails but it didn't fix the issue - anything else I can do?


  •  3,001
    Andrew replied

    Hi Robert,

    Thank you for reaching out to us.

    It seems that there is some custom CSS added to the https://deadw8.au/shop/ shop page. Here's a screenshot of the same.

    5716320903.png

    Could you see if you can replicate the same on the https://easyflowassets.com.au/shop/ shop page and let us know if it works.

    Try this and let us know how it goes.

    Cheers,

  •  5
    Robert replied

    Hi Andrew, do I just add the code from the green box area?

    Thanks

  •  5
    Robert replied

    Hi again Andrew, also do I add it in "Appearance- customise". If not where do I add it to the page?

    Thanks Robert

  •  3,001
    Andrew replied

    Hello again,

    Thank you for getting back to us.

    I'm not sure if that is the only code that you have to add as I have noted that there is a lot of custom CSS added to the woocommerce archive page. 

    Try adding that CSS in the Salient > General Settings > CSS/Script related section in the CSS box and let us know if this fixes the issue for you.

    Try that and let us know how it goes.

    Best regards,

  •  5
    Robert replied

    Hi,

    I tried adding the CSS but not sure if I have done it correctly.

    Specifically the arrow symbol after margin (circled in yellow on attached image - how do I enter that?

    The second image is how I entered the code.

    Are you able to type the code so I can just copy & paste nit please?

    Thanks

    Robert

    Attached files:  css1.png
      css.png

  •  3,001
    Andrew replied

    Hey Robert,

    Thank you for getting back to us and my apologies for the issues you're having.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    li.product-category img {
        margin: 0 0 !important;
        height: 350px !important;
        object-fit: contain;
    }

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 

    Try this and let us know what it looks like from your end.

    Cheers,

  •  5
    Robert replied

    Hi Andrew,

    Thanks for your help, I have added the code and it is working perfectly now.

    Thank you, Robert

  •  3,001
    Andrew replied

    Hey Robert,

    Thank you for getting back to us.

    Great!smile.pngGlad we could assist. Feel free to open another ticket if you have any other queries.

    Kind regards,