Customizing shop page of Woocommerce

Hello team,

I am currently installing a shop on my page with Woocommerce, and there are a few essential things that I am not able to implement with all the custom css I have been finding.

First of all, I want to add the short description for every product to the right of every product. I tried this code, but nothing showed up on my shop page anymore: https://theme.co/apex/forum/t/add-short-description-to-shop-page/5595/2
You can find my shop page here: https://www.tierramitica.com/shop/

Second we also want to add some text on the top of the shop page. How would we implement this?

Also, in the customizer I opted to have my products sorted by default in custom sorting order, but they keep appearing in a different order.

Thank you for the help.

Hi There,

Thanks for writing in!

Can you please send us your website details so that we can check why the code is not working for you.

Please provide following information:
Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials
    All the best!

Thank you Basanta! Adding secure note

Hello,

So meanwhile we tried everything we could with this css code and things were not working, so we decided to go with another option. Since the Shop page of Woocommerce is so limited, we chose to work with the product shortcode and make our own Shop page. However, we still need a way to make the products appear with the short description too. The page we are working on is : https://www.tierramitica.com/workshops-and-events/

Sorry to be changing course after asking help, we are just working against a deadline to publish our shop!

Thank you for everything!

Hello There,

Thanks for updating in!

1.) To add the product short description, please add the following code in your child theme’s functions.php file

function x_woocommerce_shop_product_thumbnails_custom() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'entry';
  $rating = ( function_exists( 'wc_get_rating_html' ) ) ? wc_get_rating_html( $product->get_average_rating() ) : $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id, $thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';

if ( x_is_shop() )  woocommerce_template_single_excerpt();

  echo "</div>";

}

add_action('init', 'x_override_product_item', 99999999 );

function x_override_product_item () {
remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails_custom', 10 );
}

2.) You cannot add a custom text above the shop page contents. You cannot edit the Shop page using Cornerstone. If you want to add a Shop page description, you have to edit the shop page using the default WordPress editor.

And it will display above the shop columns:

3.) To manage the product sorting, please check this out:

4.) To display the short product descriptions needs to add the code given in #1.

Hope this helps. Please let us know how it goes.

Hello RueNel,

Thank you so much for the help, but the coding you gave me isn{t working. Same as with the other code I tried, if I put it into my functions file, nothing shows up anymore.
Also, since we moved on now and created our own ‘shop’ page with the shop shortcode, would this code also work for the shortcode and add the description there?

The rest of your advice is working perfectly, thank you!

Hey There,

The given code will only work in the shop page. Since you are using a shortcode, it will not work. You might need to modify the code and remove the condition in the line: if ( x_is_shop() ) woocommerce_template_single_excerpt();

function x_woocommerce_shop_product_thumbnails_custom() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'entry';
  $rating = ( function_exists( 'wc_get_rating_html' ) ) ? wc_get_rating_html( $product->get_average_rating() ) : $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id, $thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';

   woocommerce_template_single_excerpt();

  echo "</div>";

}

add_action('init', 'x_override_product_item', 99999999 );

function x_override_product_item () {
remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails_custom', 10 );
}

I cannot guarantee that this code will work smoothly. Since this is already a custom development and way beyond the default display. Future issues maybe encounter because of this code.

Please let us know how it goes.

Hello RueNel,

Thank you, but the thing is that the code also does not work for me in the shop page, when I put the code into my functions.php file, nothing shows up in my shop anymore. If it would work in the shop page, then I would use the shop page. Thank you for helping me out with this, it is very important I make this work.

Hi there,

Actually, I am not sure how you will be able to extend the default product shortcode which you used to create the custom shop page. I checked the Shortcodes:

And there is no option to add the short description. You will need to contact Woocommerce support regarding this as we are not familiar with the case.

By the way, the current version of the theme is not compatible with Woocommerce version 3.3.X.

At the moment you will need to downgrade the Woocommerce to version 3.2.6:

Here is the instruction:

Thank you.

Hello Christopher,

I think I did not express myself correctly and was confusing before.
I am not asking to extend the default shortcode, I realize now that that will not work.
I want to use the dedicated shop page and use the code, but the code is not working and I wonder why.

When you say not compatible with my woocommerce version, what does that mean exactly? Because my site works from anything that I can tell?! Or is that why the code is not working?

I will do the downgrade.
Thankyou for the help

OK, just to update on my previous post, Woocommerce is advising me against doing the downgrade, and I saw on other threads that you were planning on releasing a compatible version of X with Woocommerce in February. Is that still the plan?
Could you please do a check if as far as you can tell everything is running fine on my site? If there are no big issues, I prefer waiting for the new version of X!

Thank you

Hi there,

What do you mean by not working? Is it the columns?

As far as I remember, the current one should be compatible except that there are columns issues and few glitches. I tried adding a temporary workaround but it’s not working, could you try removing all the customization that you did regarding Woocommerce? Especially the templates added through child theme’s woocommerce folder. Just make sure to back them up so you can add them later once we’re done the checking.

About the release, there will be but I’m not sure the exact ETA. Please stay tuned for that :slight_smile:

Thanks!

Hello Rad!

When I put the code into my functions file, all the products disappear from my page, and if I look at the page source, there is also just nothing there. I made a print screen that might be helpful for you to help me.
I can do as you say and remove all customization, but it is all mainly about background colours and stuff and in my Child theme there are only email templates added under woocommerce, but if this extra info doesn’t help to find the solution, then I will try that.

Thanks a lot, you guys are awesome :slight_smile:

Hi there,

I was referring to the other customization as there could be conflict to the code above. The products are there, but just hidden. Please remove that code, it’s old and probably not working anymore for the latest Woocommerce version. This is not incompatibility of the theme or Woocommerce, but with the custom code.

And unfortunately, due to the layout of the current product items, you can’t add any excerpt as there is no place to display. It’s just a cover image with hover title.

As for Shop description, I added a test text and it’s displayed https://www.tierramitica.com/wp-admin/post.php?post=3846&action=edit

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.