Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • July 20, 2019 at 11:36 pm #1120495
    Dzimnikov

    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

    July 21, 2019 at 3:21 am #1120546
    Mike

    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

    July 21, 2019 at 6:41 am #1120569
    Dzimnikov

    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?

    July 21, 2019 at 2:52 pm #1120636
    Mike

    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

    July 21, 2019 at 3:55 pm #1120649
    Dzimnikov

    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

    July 22, 2019 at 3:30 am #1120733
    Mike

    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

    July 23, 2019 at 12:59 am #1121056
    Dzimnikov

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

    July 23, 2019 at 1:58 am #1121068
    Mike

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

    Best regards,
    Mike

    July 24, 2019 at 8:51 pm #1121723
    Dzimnikov

    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 5 years, 5 months ago by Dzimnikov.
    July 25, 2019 at 2:49 am #1121800
    Mike

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

    Best regards,
    Mike

    July 30, 2019 at 11:41 pm #1123366
    Dzimnikov

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

    Thanks,
    -Daniel

    August 1, 2019 at 2:51 pm #1123914
    Ismael

    Hi,

    Thank you for the update.

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

    Best regards,
    Ismael

    August 2, 2019 at 8:55 pm #1124270
    Dzimnikov

    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

    August 4, 2019 at 3:13 am #1124453
    Mike

    Hi,
    Please see the Private Content area.

    Best regards,
    Mike

    August 5, 2019 at 3:25 am #1124617
    Dzimnikov

    Thank you so much!

    August 5, 2019 at 2:29 pm #1124751
    Ismael

    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

    August 7, 2019 at 12:14 am #1125320
    Dzimnikov

    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

    August 7, 2019 at 11:15 am #1125459
    Ismael

    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

    August 8, 2019 at 12:15 am #1125747
    Dzimnikov

    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

    August 9, 2019 at 2:45 pm #1126228
    Ismael

    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

    August 12, 2019 at 6:58 am #1126727
    Dzimnikov

    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!

    August 15, 2019 at 12:57 am #1127775
    Dzimnikov

    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

    August 15, 2019 at 9:02 am #1127858
    Mike

    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

    August 15, 2019 at 6:06 pm #1127991
    Dzimnikov

    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 5 years, 4 months ago by Dzimnikov.
    August 16, 2019 at 4:51 am #1128132
    Mike

    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

    August 16, 2019 at 9:19 am #1128190
    Dzimnikov

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

    August 16, 2019 at 5:44 pm #1128309
    Victoria

    Hi Dzimnikov,

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

    Best regards,
    Victoria

  • Author
    Posts
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.