Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1339251

    huylam1
    Participant

    Hi there,

    I would like to know how I would display the inventory amount and the Short Description of my products on my Shop page. Right now it shows on each individual page, but I was wondering if it was possible to have it on the shop page as well.

    As well, can you tell me if I can change the inventory description from ‘# in stock’ to ‘# of spots left’. Thank you.

    My URL is http://naokokamura.ca/sang/shop/.

    Thank you.

    #1339371

    Christopher
    Moderator

    Hi there,

    Please add following code in child theme’s functions.php file :

    //Add excerpt to archive pages
    
    add_action( 'woocommerce_after_shop_loop_item_title', 'output_product_excerpt', 35 );
    
    function output_product_excerpt() {
    global $post;
    echo $post->post_excerpt;
    }
    
    //Add stock status to archive pages
    
    function envy_stock_catalog() {
        global $product;
        if ( $product->is_in_stock() ) {
            echo '<div class="stock" >' . $product->get_stock_quantity() . __( ' in stock', 'envy' ) . '</div>';
        } else {
            echo '<div class="out-of-stock" >' . __( 'out of stock', 'envy' ) . '</div>';
        }
    }
    add_action( 'woocommerce_after_shop_loop_item_title', 'envy_stock_catalog' );

    Hope it helps.

    #1339734

    huylam1
    Participant

    Hi there,

    Thank you for the code, however, the Short Description is at the bottom of the image and therefore, behind the black translucent Title. Can we position the Short Description on the top of the image.

    The Inventory Amount font is in black which makes it difficult to see on the black background. Can we change this color to white. Also, it is pushing down the black background, so that the ‘Add to Cart’ button is only half showing up.

    Can you also tell me how to change the inventory text from ‘# in stock’ to “# of spots left”.

    Thank you.

    #1340031

    Rad
    Moderator

    Hi there,

    Please change this

    add_action( 'woocommerce_after_shop_loop_item_title', 'output_product_excerpt', 35 );
    
    function output_product_excerpt() {
    global $post;
    echo $post->post_excerpt;
    }

    to this

    add_action( 'woocommerce_after_shop_loop_item_title', 'output_product_excerpt', -9999 );
    
    function output_product_excerpt() {
    global $post;
    echo '<div class="shop_excerpt">'.$post->post_excerpt.'</div>';
    }

    Then maybe we can apply positioning to .shop_excerpt once this change is applied.

    Then change this code

    function envy_stock_catalog() {
        global $product;
        if ( $product->is_in_stock() ) {
            echo '<div class="stock" >' . $product->get_stock_quantity() . __( ' in stock', '__x__' ) . '</div>';
        } else {
            echo '<div class="out-of-stock" >' . __( 'out of stock', '__x__' ) . '</div>';
        }
    }
    add_action( 'woocommerce_after_shop_loop_item_title', 'envy_stock_catalog' );

    to this

    function x_custom_stock_catalog() {
        global $product;
        if ( $product->is_in_stock() ) {
            echo '<div class="stock" >' . $product->get_stock_quantity() . __( ' of spots left', '__x__' ) . '</div>';
        } else {
            echo '<div class="out-of-stock" >' . __( 'out of stock', '__x__' ) . '</div>';
        }
    }
    add_action( 'woocommerce_after_shop_loop_item_title', 'x_custom_stock_catalog' );

    Then add this CSS to Admin > Appearance > Customizer > Custom > CSS

    .post-type-archive-product.woocommerce .product .stock {
    color: #fff;
    }
    .woocommerce li.product:hover .entry-wrap {
        top: calc(100% - 12.585em);
    }

    Hope these helps.

    #1340185

    huylam1
    Participant

    Hi there,

    Thank you for the updated code. It’s helping but there are still a couple of things that require fixing. The Short Description is now on the back background but font is also in black so it is hard to see. As well, the Add to Cart button is still getting pushed off the screen. Thank you.

    #1340278

    Rue Nel
    Moderator

    Hello There,

    Thanks for updating in! To resolve the remaining issue, please find this code:

    .woocommerce li.product:hover .entry-wrap {
        top: calc(100% - 12.585em);
    }

    Have it updated and make use of this code instead:

    .woocommerce li.product:hover .entry-wrap {
        top: calc(100% - 15em);
    }

    The shop excerpt is not behind. Its just that the color is almost the same as the background. You will need to change to white. To do that, please use this custom css code:

    .woocommerce li.product:hover .entry-wrap .shop_excerpt {
        color: #fff;
    }

    Hope this helps.

    #1342244

    huylam1
    Participant

    Hi there,

    That worked just fine, thank you. However, instead of having the Short Description and Inventory count on the black pop up background, can I place that information at the top of the picture so it doesn’t disappear. Thank you.

    #1342752

    Lely
    Moderator

    Hi There,

    You’re welcome!
    Unfortunately, moving the short description and inventory count out of the black pop up needs restructuring of the current template that is beyond the scope of our support. We do provide simple customization of current design and functionalities but this will require more than what we an offer because restructuring the current setup will lead to more design issues. You may want to consult a developer to achieve this. Thank you for understanding.

    #1343539

    huylam1
    Participant

    Hi there,

    The original code that Christopher provided to put in the functions.php put the Short Description on the bottom of the picture, independent of the black pop-up. Is there not a way to move that to the top of the photo?

    Thanks again.

    #1344329

    Lely
    Moderator

    Hello There,

    Please update this:

    function x_custom_stock_catalog() {
        global $product;
        if ( $product->is_in_stock() ) {
            echo '<div class="stock" >' . $product->get_stock_quantity() . __( ' of spots left', '__x__' ) . '</div>';
        } else {
            echo '<div class="out-of-stock" >' . __( 'out of stock', '__x__' ) . '</div>';
        }
    }
    add_action( 'woocommerce_after_shop_loop_item_title', 'x_custom_stock_catalog' );

    To this:

    function x_custom_stock_catalog() {
        global $product;
        if ( $product->is_in_stock() ) {
            echo '<div class="stock" >' . $product->get_stock_quantity() . __( ' of spots left', '__x__' ) . '</div>';
        } else {
            echo '<div class="out-of-stock" >' . __( 'out of stock', '__x__' ) . '</div>';
        }
    }
    add_action( 'woocommerce_before_shop_loop_item', 'x_custom_stock_catalog',35 );

    Also update this:

    add_action( 'woocommerce_after_shop_loop_item_title', 'output_product_excerpt', -9999 );
    
    function output_product_excerpt() {
    global $post;
    echo '<div class="shop_excerpt">'.$post->post_excerpt.'</div>';
    }

    To this:

    add_action( 'woocommerce_before_shop_loop_item', 'output_product_excerpt', 34 );
    
    function output_product_excerpt() {
    global $post;
    echo '<div class="shop_excerpt">'.$post->post_excerpt.'</div>';
    }

    Note that this is not a recommended setup. This will make your product images misaligned because the short description might vary in length.

    Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

    #1349352

    huylam1
    Participant

    Hi there,

    Thank you for the code. Is is just what I was looking for. Just one last question: Is there a way for the inventory to show up on the shop screen only when the Stock Management is enabled (i.e. I don’t want the label “# spots left” to appear on products that I don’t have the stock management enabled. Thank you again.

    #1349438

    Thai
    Moderator

    Hi There,

    Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in-depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.