WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Display attribute description in product variation (15 posts)

  1. bkcol
    Member
    Posted 8 months ago #

    Hi,

    I'd need a bit of help displaying the attribute description underneath the variations when they are present.

    Basically I have a number of variations and I need to show the attribute description directly under the dropdown box when one is present and to show nothing when there isn't a description.

    I've searched through the support section and google for the code to add. There's a couple of topics that address this issue but they don't seem to be related to what I need.

    I believe I need to modify the variations.php file as I've made some other adjustments to this template with success.

    I'm using the theme 'Responsive' with my own child theme.

    Any help would really be appreciated.

    http://wordpress.org/plugins/woocommerce/

  2. bkcol
    Member
    Posted 8 months ago #

    Ok so I've got the descriptions showing by placing this code below the dropdown selections

    <?php
    	foreach ( $terms as $term ) {
            $term_desc = strtolower($term->description);
    	echo "<div class='plans-description'>$term_desc</div><br />";
            }?>

    Unfortunately ALL of the descriptions are showing up for each attribute variation.

    Can anybody help me progress with this and make it only show the description of the selected variation?

  3. bkcol
    Member
    Posted 7 months ago #

    Is anybody able to help me with this? I still haven't been able to resolve it

  4. marqueteur
    Member
    Posted 7 months ago #

    Just found this - after trying for quite a while to even get hold of the attribute descriptions. Haven't gotten to test your code yet (and won't until morning), but I suspect the code you need to add (or similar) most likely resides in the code used to change the featured image when selecting a variation when selecting that variation.

    I'll be looking into this more tomorrow.

    Tor

  5. bkcol
    Member
    Posted 7 months ago #

    Thanks Tor.. What exactly did you find? Look forward to seeing the results

  6. marqueteur
    Member
    Posted 7 months ago #

    Can't say as I've gotten to figuring out which bit of code you need. I've spent the time I've had since finding your post figuring out how to get a nice list of colours and descriptions to show under the additional information tab - which I've just managed and need to prettify a bit.

    The relevant section of my code is at the bottom of my post (I think I've got a few statements that don't do anything useful to prune, still). This bit, though, about two thirds through is the key bit for getting only relevant colours rather than all colours:

    if ( ! in_array( $term_name, $values ) )
    				      continue;

    I'll take a look for the image section soon. I pulled the interesting bits for this mostly from $woocommerce/templates/single-product/add-to-cart/variable.php . Somewhere in $single-product/ probably exists the image loading code, and somewhere in that would be my first guess location for the useful code - though what is there may be a call to a function that exists elsewhere. That function may be all you need, though.

    Now that I've seen what you are trying to do I want it too, but it'll probably be an hour or two before I get back to looking. With my (very) limited PHP experience I'm shooting in the dark a bit.

    Tor

    if ( $attribute['name'] == 'pa_color' ) {
    				    echo "<dl>";
    				    $args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
    				    $terms = get_terms( 'pa_color', $args );
    				    $values = woocommerce_get_product_terms( $product->id, $attribute['name'], 'names' );
    				    foreach ( $terms as $term ) :
    				    $term_name = $term->name;
    				    if ( ! in_array( $term_name, $values ) )
    				      continue;
    				    $term_desc = $term->description;
    				    echo "<dt>$term_name <dd> $term_desc";
    				    endforeach;
    				    echo "</dl>";
    				  }
  7. bkcol
    Member
    Posted 7 months ago #

    I added your code below over the top of my code in /add-cart/variable.php and it did render the descriptions so its close. Now just need to hide what we don't need to see

  8. marqueteur
    Member
    Posted 7 months ago #

    Just got back. IIUC, you now have only the specific attributes used for the product displayed instead of the entire global list displayed before with your original code. Is this so?

    I'm just starting to look at product-image.php to see if I can find the hook we need.

    Tor

  9. bkcol
    Member
    Posted 7 months ago #

    Actually its displaying exactly what I was seeing with my code. I am only seeing the attribute descriptions that relate to my variables but they're all showing (all the attributes desc for each variable) instead of showing just the one relating to the dropdown choice.

  10. marqueteur
    Member
    Posted 7 months ago #

    Ah. I think what is going on is that the if statement I pulled from my code is already in variable.php, so when you call $terms it already has a properly trimmed list. In that case said if statment is redundant and should be removed to (theoretically) speed up processing.

    Do you happen to know if the product image change on attribute selection can be done in PHP/HTML, or if it is definitely JS or other script?

  11. bkcol
    Member
    Posted 7 months ago #

    I'm really not sure sorry. I don't see why it couldn't be displayed using PHP/HTML but I'd say it would need to continue to hook into JS. My knowledge is quite limited too.

  12. bkcol
    Member
    Posted 7 months ago #

    So I've made a bit of progress. I combined a solution to show/hide div areas dependant on the dropdown value. I've got the values hidden with js but I can't get them to display. Still chipping away at it but if anybody else has an idea it would be much appreciated

    js

    $(document).ready(function(){
     $('.box').hide();
      $('#pa_assembled').change(function() {
        $('.box').hide();
        $('#div' + $(this).val()).show();
     });
    });

    PHP in 'variable.php'

    foreach ( $terms as $term ) {
         $term_desc = strtolower($term->description);
          if ( 'pa_assembled' !== $term_desc ) {
              echo "<div class='box' id='div$term->slug'>$term_desc</div><br />";
    }
    else {
    //										}
    }
  13. bkcol
    Member
    Posted 7 months ago #

    I think it could be failing because all options have 'class="active"'. Anybody know how to deactivate this?

  14. morollian
    Member
    Posted 7 months ago #

    bkol If you want to remove a class you can do it using jQuery:

    $('selector').removeClass("active");

    But I guess this is not the answer you're looking for... this would "force" the class "active" to be removed, and this class could be used (and it probably is) by some woocommerce functions...

    I'll think about it.

    I've tried your code and couldn't make it work, I'm using the WooCommerce Color and Images Swatces so I'm better opening a new thread...I'll let you know when I make it work! Good Luck!

  15. bkcol
    Member
    Posted 7 months ago #

    Thanks Morollian. After I posted about the active class I came to realise that Woocommerce would probably need it to utilise the variations. Look forward to seeing what you discover!

Reply

You must log in to post.

About this Plugin

About this Topic