Hello,
Is there a way I can change the grid list in my product archives to list mode?
Tried different plug-ins, but when I activate any, instead of list it shows a huge image in one column for each product, making the page look awful. (tried Grid & List Toggle for Woocommerce and WooCommerce Grid / List toggle, same result in both).
I really appreciate your help.
Regards
Found this code in the old forum, but it is not working…
@media(min-width: 768px){
.woocommerce ul[class*="cols-"] li.product{
width: 100%;
}
.woocommerce ul[class*="cols-"] li.product .entry-featured {
width: 25%;
float: left;
}
.woocommerce ul[class*="cols-"] li.product .entry-wrap {
position: relative;
width: 75%;
float: right;
}
.woocommerce ul[class*="cols-"] li.product .entry-header .button {
display: inline-block;
}
}Hello There,
Thanks for writing in!
Do you want something like this?
If that is the case, please make use of this code instead:
@media(min-width: 768px){
.woocommerce .products li.product{
width: 100%;
}
.woocommerce .products li.product .entry-featured {
width: 25%;
float: left;
}
.woocommerce .products li.product .entry-wrap {
position: relative;
width: 75%;
float: right;
}
.woocommerce .products li.product .entry-header {
padding: 50px;
}
.woocommerce .products li.product .entry-header .button {
display: inline-block;
}
}
Hope this helps. Kindly let us know.
Hello, thanks for the response. It worked fine, but how do I get rid of the roll over? When the cursor is over the left side, the box goes up, hiding the info. Is it possible to show the excerpt as well?
Example here: https://waveexpeditions.com/product-category/tours/
Access info to the site
Hello There,
To remove the roll over effect, you will have to add this custom css code as well.
.woocommerce li.product:hover .entry-wrap:before {
background-color: rgba(0,0,0,0.5);
}
If you want to add a short product description, you might need to check out this related thread: https://theme.co/apex/forum/t/add-short-description-to-shop-page/5595/2
Hope this helps.
I really appreciate your help. Codes are really working well, but is there a way to remove the “going up” effect" on roll over also?
And about the excerpt, how do I put it after the price instead bellow the image as is it showing with the code?
Thank you very much!!!
Hi,
I checked and can no longer see the hover effect. Can you confirm if you already have figured this out.
With regards to excerpt, please change the code to this.
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>';
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 );
}
function add_product_excerpt() {
if ( x_is_shop() ) woocommerce_template_single_excerpt();
}
add_action('init', 'x_add_product_excerpt ', 99999999 );
function x_add_product_excerpt () {
add_action( 'woocommerce_after_shop_loop_item', 'add_product_excerpt', 10 );
}
Hope that helps.
Hello Paul! Thanks for the code.
There is an error on it “Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'x_add_product_excerpt ’ not found or invalid function”
I just commented the code in order to avoid the error while you help me sort it out.
About the roll over effect is still there, the effect I’m talking is the “push up” effect that moves the title and price box up, I removed the dark effect with the code you guys gave me.
Thanks
Hi There,
Please find this code:
function add_product_excerpt() {
if ( x_is_shop() ) woocommerce_template_single_excerpt();
}
add_action('init', 'x_add_product_excerpt ', 99999999 );
function x_add_product_excerpt () {
add_action( 'woocommerce_after_shop_loop_item', 'add_product_excerpt', 10 );
}
And change to this:
add_action( 'woocommerce_after_shop_loop_item', 'add_product_excerpt' );
function add_product_excerpt() {
if ( x_is_shop() )
woocommerce_template_single_excerpt();
}
Hope it helps 
Hi guys:
With the changes you suggested the final code looks like this:
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>';
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 );
}
add_action( 'woocommerce_after_shop_loop_item', 'add_product_excerpt' );
function add_product_excerpt() {
if ( x_is_shop() )
woocommerce_template_single_excerpt();
}
But the code is not working well, since the excerpt is not showing and the “push up” effect is still there.
I just commented the code since it messes the page. I’m terribly sorry for bother you guys with this, but can you please take a look and help me out.
Regards
Hello There,
Thanks for updating in! I went ahead and have updated your code. I used this one instead:
/* Add excerpt to product page */
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>';
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 );
}
add_action( 'woocommerce_after_shop_loop_item_title', 'add_product_excerpt' );
function add_product_excerpt() {
if ( x_is_shop() ) {
echo '<div class="mtl">';
woocommerce_template_single_excerpt();
echo '</div>';
}
}
/* */
If you want to make the excerpt display in white color, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
.woocommerce-product-details__short-description {
color: #fff;
}
Please check your site now.
Amazing, thanks. Looks great, but for some reason excerpt text is not showing even when I added the text color in the Global CSS.
Thanks for the support.
Hi @judelgado
I can see the product short description is appearing fine here:
https://waveexpeditions.com/shop/
Because that’s the shop page as the condition is written in the code above:
if ( x_is_shop() ) {
If you want to show the short product description on this page:
https://waveexpeditions.com/product-category/tours/
Then you need to replace this line in the code above:
if ( x_is_shop() ) {
with:
if ( x_is_shop() || x_is_product_category() ) {
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.