top image in woocommerce category

Hey Yossi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.archive #main .template-shop.content .page-thumb img {
	width: 100% !important;
}

On some of your categories the “page-thumb” is not present, do all of your categories have a thumbnail image in the product categories option? If so perhaps there is a plugin conflict, have you tried disabling your plugins and checked?

Best regards,
Mike

Hi,
Glad this is working for you, for question 2 please include admin login in the Private Content area so we can investigate further.

Best regards,
Mike

Hi,
Thank you for the login, I’m not sure why this occurs, when the filters are used the image container is removed so the image doesn’t show. I wrote this workaround that will add the image container only on an archive page with the category term “term-43” only if the image container is missing, I believe this covers all of the “if’s”
Try adding this code to the end of your functions.php file in Appearance > Editor:

function add_archive_thumb_for_term_earrings(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $('#top.archive.term-43').each(function() {
  	if($('.entry-content-wrapper .page-thumb').length) { } else { 
  	$('<div class="page-thumb"><img width="845" height="276" src="https://www.alinyerushalmi.co.il/wp-content/uploads/2019/09/earrings-alin-845x276.jpg" class="category_thumb" alt=""></div>').insertAfter('.woocommerce-notices-wrapper');
  	}
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_archive_thumb_for_term_earrings');

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear this helped, so since the function above is adding the “earring” image I wanted it to only work with category term “term-43”
When I look at your product categories I see you have three categories with images, so each one will need its own function.

will there be more than three?
This function works with all three categories:

function add_archive_thumb_for_terms(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $('#top.archive.term-43').each(function() {
  	if($('.entry-content-wrapper .page-thumb').length) { } else { 
  	$('<div class="page-thumb"><img width="845" height="276" src="https://www.alinyerushalmi.co.il/wp-content/uploads/2019/09/earrings-alin-845x276.jpg" class="category_thumb" alt=""></div>').insertAfter('.woocommerce-notices-wrapper');
  	}
});
$('#top.archive.term-44').each(function() {
  	if($('.entry-content-wrapper .page-thumb').length) { } else { 
  	$('<div class="page-thumb"><img width="845" height="276" src="https://www.alinyerushalmi.co.il/wp-content/uploads/2019/09/Bracelet-alin-845x276.jpg" class="category_thumb" alt=""></div>').insertAfter('.woocommerce-notices-wrapper');
  	}
});
$('#top.archive.term-42').each(function() {
  	if($('.entry-content-wrapper .page-thumb').length) { } else { 
  	$('<div class="page-thumb"><img width="845" height="276" src="https://www.alinyerushalmi.co.il/wp-content/uploads/2019/09/Necklace-alin-845x276.jpg" class="category_thumb" alt=""></div>').insertAfter('.woocommerce-notices-wrapper');
  	}
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_archive_thumb_for_terms');

notice how I only changed the “#top.archive.term-XX” and the image url for each one, if you follow this you can create as many as you like.

Best regards,
Mike

Hi,
Glad to hear, Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Yes, you can install a child theme now, Read about it & Get it here After you activate your child theme you can then move your customizations from your parent theme functions.php, to your child theme functions.php. If you changed any theme files then typically you can add those to your child theme folder, it depends on the file.
To switch from your parent theme to the child theme and retain your same settings please follow these steps, first with your parent theme active go to Enfold Theme Options > Import/Export > Export Theme Settings File and download your theme settings file for fallback.
then activate your child theme and ensure your Enfold Theme Options > Performance > JS & CSS file merging and compression is turned off along with any caching plugins, then go to Enfold Theme Options > Import/Export > Import Settings From Your Parent Theme and import, then go to your homepage and clear your browser cache a couple of times and check that the settings have taken effect.
If it doesn’t look quite right then check that your Enfold Theme Options > Performance > JS & CSS file merging and compression is turned off and clear your browser cache a couple of more times.
If still not quite right, then go to Enfold Theme Options > Import/Export > Import Theme Settings File and upload the theme settings file you saved earlier, and clear your browser cache a couple of more times.
This should all work fine the first time, I only added the extra steps “just in case”.

Best regards,
Mike

Hi,
Thank you for the link to your /product-category/strips/ page but since this is a different site and it’s been over a year since we have looked at this customization I’m not quite sure if you are using the same script as above, can you include an admin login to this new site so I can take a look?
Thank you for the mockup image for the mobile header that you are trying to achieve, please try this css:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all .logo {
    float: none !important;
    margin: auto !important;
}
.responsive #top #wrap_all #header {
    height: 140px !important;
}
.responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    top: 60px !important;
    right: 150px !important;
}
.responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
    right: 90px !important;
    top: 60px !important;
}
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the login details, but I’m getting a 403 error for the login page, perhaps this is a security setting, if so please whitelist my IP in the Private Content area.

Best regards,
Mike

Hi,
Thanks, but I believe my IP is being blocked because I’m not seeing the WordPress login form just this:

I can see your dev site front page fine, it looks like you are using the “Shop Demo” 🙂

Best regards,
Mike

Hi,
Thank you for the login, but I’m not sure why this is occurring, I have tried to recreate this on my server but so far I have not been able to. I see that you are using Variation Swatches for WooCommerce and Advanced Custom Fields together and this makes it complicated to try to recreate. When the filters are used the product description container that holds the image is removed so the page structure is changing. I might be able to inject the image with jQuery as we did a year ago, but we would need to write this for each category, do you plan on using a lot of categories? Does this also need to work for mobile? This might be a bigger job than it looks.

Best regards,
Mike

Hi,
Thank you for your patience, I added the function for the first category that has the slug “strips” and it seems to be working well, please check, but I notice that for your product categories this is the only one in English and I wonder if this was in error or if it will be changing, or if the other ones will be changing?

the slug is not in the code so the language doesn’t matter, but changing the slug may change the slug ID which is in the code, so please check if this will be changing and correct before I make the other categories so we don’t have to re-write the code later, thank you.

Best regards,
Mike

Hi,
Glad to hear this helped. As for your site not moving smoothly, I took a look and your store seems to operate like any other woocommerce site I’ve checked, I note that you have several pro-level third-party woo plugins that will add overhead to your site but I’m really not seeing anything crazy right now. I also see that you are not caching right now either so as you add more products I would imagine the caching would offset this overhead too. Perhaps as you plan out your store, try to guide the customer along so the number of products shown on each screen are minimal, such as 20 instead of 200 that would also help, overall.

Best regards,
Mike

Hi,
Thank you for the screenshot, it seems that the issue occuurs for smaller mobile screens, 320px – 375px, to correct this please try this css:

@media only screen and (max-width: 376px) { 
	#menu-item-shop .cart_dropdown_link {
    padding: 0 !important;
}
.responsive.html_cart_at_menu #top .main_menu .menu>li:last-child {
    padding-right: 0 !important;
    margin-right: 0 !important;
}
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
    padding: 0 0 0 8px !important;
}
.responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all #header_main .main_menu {
    right: 120px !important;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now as it is quite long and covers several issues from multiple sites and thus becoming hard to follow. Typically we ask to start a separate thread for each request so it is easier for everyone to follow along. Thank you for using Enfold.
For any other questions or issues, feel free to start a new thread in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike