Tagged: x
-
AuthorPosts
-
January 20, 2017 at 8:08 pm #1339251
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.
January 20, 2017 at 11:26 pm #1339371Hi 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.
January 21, 2017 at 11:21 am #1339734Hi 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.
January 21, 2017 at 7:26 pm #1340031Hi 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.
January 22, 2017 at 12:04 am #1340185Hi 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.
January 22, 2017 at 3:38 am #1340278Hello 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.
January 23, 2017 at 5:07 pm #1342244Hi 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.
January 24, 2017 at 2:23 am #1342752Hi 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.January 24, 2017 at 1:14 pm #1343539Hi 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.
January 25, 2017 at 1:09 am #1344329Hello 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.
January 29, 2017 at 1:04 am #1349352Hi 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.
January 29, 2017 at 4:34 am #1349438Hi 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.
-
AuthorPosts