Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #1120495

    Hi guys,

    Question for ya. When I click on another category in the shop, the product itself changes to a degree, where the second featured image would work better than the first. Here is the URL: https://www.bonjiglass.com/store/?swoof=1&product_cat=bonji-dab

    Because that is a “dab” category, I want to be able to show the second images of the products, which show the products with dab extenders. Is there a way to a code that would make that switch? Would it be possible?

    Thanks,
    -Daniel

    #1120546

    Hey Dzimnikov,
    I added this css to your Quick CSS:

    .post-type-archive-product .product_cat-bonji-dab .avia-product-hover {
        opacity: 1 !important; 
    }

    Please clearing your browser cache and check.

    Best regards,
    Mike

    #1120569

    Hi Mike,

    Thank you so much for the help! Seems to be working, except its switching to the second image across the board (when you load the main shop page), not only when “Dab Compatible” is selected as a filter.

    Would it be possible to make it so that the second picture only loads when “Dab Compatible” is selected?

    Thanks,
    -Daniel

    PS. Did you just simply drop the opacity of the featured image to .1, allowing the second image to show through?

    #1120636

    Hi,
    Unfortunately, when the dab filter is used there is not custom class added to the page, when a item is shown that is a dab the class “product_cat-bonji-dab” is added to the product so when the page is an archive and dab items are shown, not the best but I don’t see another option.

    PS: Yes

    Best regards,
    Mike

    #1120649

    Does the item get converted to being a “dab item” after the category “Dab Compatible” is selected as a filter?

    Basically what you’re saying is that there is no set identifier (custom class) declared when the category is selected, thus it is hard to make a rule based on the selection of the category. What about using the slug “bonji-dab” somehow. So when “bonji-dab” is activated/present, the first picture has its opacity lowered and the second one stands out?

    Seems like such a simple concept, but can be incredibly useful. Hope we can figure it out. Thank you so much for the help as always!

    Thanks,
    -Daniel

    #1120733

    Hi,
    I found a way to check the url for the term “bonji-dab” and then change the opacity.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_dab_script(){
      ?>
      <script>
    (function($){
      $(document).ready(function(){
      var url = location.pathname;
      if ("url:contains('bonji-dab')") {
        $(".post-type-archive-product .product_cat-bonji-dab .avia-product-hover").css({ 'opacity': '1' });
      } 
      });
      })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_dab_script');

    Best regards,
    Mike

    #1121056

    Thank you so much, this is amazing!!! Yall the best!!!

    #1121068

    Hi,
    Thank you for using Enfold, shall we close this then?

    Best regards,
    Mike

    #1121723

    Not yet, something is being weird.

    Its always showing the second image, not only when “dab compatible” category is selected.

    Seems like the code isn’t picking up on the URL code condition, which is weird, because it was working before :'(

    Can you please take a look?

    • This reply was modified 4 months, 2 weeks ago by  Dzimnikov.
    • This reply was modified 4 months, 2 weeks ago by  Dzimnikov.
    #1121800

    Hi,
    Please include an admin login in the Private Content area, so we can take a look.

    Best regards,
    Mike

    #1123366

    Sorry for the late reply. Login deets are in the private area!

    Thanks,
    -Daniel

    #1123914

    Hi,

    Thank you for the update.

    Did you remove the script? It’s not in the functions.php file.

    Best regards,
    Ismael

    #1124270

    I did remove it because it was showing the second featured photo across the board. I’d rather show the first photo across the board.

    Feel free to test the code and try it out, but until its only showing the second featured photo when you click on “dab compatible” category, I’d prefer not to have the code there permanently.

    Is that ok?

    Thanks,
    -Daniel

    #1124453

    Hi,
    Please see the Private Content area.

    Best regards,
    Mike

    #1124617

    Thank you so much!

    #1124751

    Hi,

    Thank you for the update.

    Are you trying to hide the first image of the products with the category “bonji-dab”? This css code might help.

    .product_cat-bonji-dab .thumbnail_container img:nth-child(1) {
        opacity: 0 !important;
    }

    Best regards,
    Ismael

    #1125320

    Yes, exactly. I want to hide the first image with the bowl and show the second image with the rounder longer transparent dab compartments.

    The code above almost worked, though it made the second image disappear, not the first. I’m looking to get the first one to disappear and show the second.

    Side question. I’m having a bit of trouble with a part of the coupon code generator. I purchased the woocommerce coupon extension, and I can now add items for free when a coupon code is activated. I have a coupon code named: freesnake that gives away a free snake bowl (the item is linked and 100% price reduction is applied). The problem I’m having is doing this with new products I add to the site. I have another coupon named: freebanger , and I want to give away the quartz banger product for free with it, but the product is not showing up when I type it into the coupon. Its not recognizing its existence. I’m not quite sure why.

    Thank you guys for all the help!
    -Daniel

    #1125459

    Hi,

    The code above almost worked, though it made the second image disappear

    That’s odd. The nth-child is set to 1, so it should be hiding the first image. Try to replace “nth-child(1)” with “first-child”.

    .product_cat-bonji-dab .thumbnail_container img:first-child {
        opacity: 0 !important;
    }

    If in case you want to hide the second image, use this:

    .product_cat-bonji-dab .thumbnail_container img:nth-child(2) {
        opacity: 0 !important;
    }
    

    For additional inquries, we kindly ask that you open them up in a new thread. Thank you.

    Best regards,
    Ismael

    #1125747

    Thats not working either. It seems to be identifying products under the category “dab-compatible”, no matter which category parameter is selected on the shop page, and removes the second image. I feel like we’re close, but not quite there.

    I’ll go ahead and start a new thread.

    Thanks,
    -Daniel

    #1126228

    Hi,

    Thank you for the update.

    The css code actually works. We added it again in the Quick CSS field. Try to remove or purge the cache before checking it.

    Screenshot: https://imgur.com/a/pddvu6c

    Best regards,
    Ismael

    #1126727

    Thos are still the first images… the featured ones. Those are the ones that I want to disappear when the “dab compatible” category is selected.

    I want the second photos, the ones that have these: https://imgur.com/GRE94ul

    I want those to show up (they are the second images for every product), when the “dab compatible” category is selected!

    #1127775

    Is Mike around? Him and I were really close to figuring it out. I think if we use an in-code identifier for the category “dab compatible” instead of the URL identifier, it could work.

    Can we please give that a try? We are so close and this would make a huge difference in the site dynamic and will most likely lead to more sales. I wish there was an easier way to make minor tweaks like this.

    Cheers,
    -Daniel

    #1127858

    Hi Daniel,
    Your idea for using an in-code identifier for the category “dab compatible” this time clicked with me and I looked at the checkbox for “dab compatible”, so this function checks to see if the checkbox is checked, and the product is from the category “bonji-dab” and then applies the opacity.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_dab_script(){
      ?>
      <script>
    (function($){
      $(document).ready(function(){
      	if ($('input[type=checkbox][name=bonji-dab]').prop('checked')) {
        $(".post-type-archive-product .product_cat-bonji-dab .avia-product-hover").css({ 'opacity': '1' });
    } else {
    }
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_dab_script');

    Please ensure the other function above that starts with “function custom_dab_script()” is remove, otherwise you will get an error, or crash, because the names of functions must be unique in your functions.php.

    Best regards,
    Mike

    #1127991

    Mike, you are a legend! A god amongst men! Thank you thank you thank you! Works perfectly!!!

    I literally can’t thank you enough for all the support you have provided me in building my site. You are literally on another level!!!

    Cheers,
    -Daniel

    PS. Do you happen to teach how PHP works? I have a firm grasp on basic CSS, but I’m still very new to PHP lol

    • This reply was modified 3 months, 3 weeks ago by  Dzimnikov.
    #1128132

    Hi Daniel,
    Thank you for the kind words, but I’m still learning and am a student of my team’s great examples, and what I can find on Google.
    Anyways, shall we close this then?

    Best regards,
    Mike

    #1128190

    Yup, lets do it. Thank you. I have another thread open where I need some help. Coupon functionality isn’t working properly :'(

    #1128309

    Hi Dzimnikov,

    Ok, so we can close this thread and someone will help you with the other one.

    Best regards,
    Victoria

Viewing 27 posts - 1 through 27 (of 27 total)

The topic ‘Change featured image in shop when category is selected’ is closed to new replies.