Adding SKU under product description and grid view

Hi there!
#1 I’m trying to add the sku code underneath the item title and short description in the whole shop. I have found this code, but it is adding it at the wrong spot. I would like it right underneath the product description in list view. How can I do this?
#2 Also one more question is that I would like to add the products short description underneath the product title in grid view as well the the SKU code.
#3 last question is that I would like to stop the hover underneath the product title to display the options of add to cart, but rather always have it there. How can I do this?

function vise_varenummer_katalogsiden() {

global $product;

if ( $product->get_sku() ) {
echo ‘<div class=”product-meta”>Varenummer: ‘ . $product->get_sku() . ‘</div>’;
}
}
add_action( ‘woocommerce_after_shop_loop_item_title’, ‘vise_varenummer_katalogsiden’, 9 );

Attachments:

You must be logged in to view attached files.

1-2) Sorry, but your request is related to additional code customization of the theme. But we can’t help you since it is out of theme support scope according to Envato Policy https://themeforest.net/page/item_support_policy

3) You can select another type of hover in the Dashboard -> Theme Settings -> Shop -> Hover on product

Kind Regards
XTemos Studio

Hi thank you for your replay! I really appreciate it, and so far you guys have been angles when it comes to answering questions. This is my last question and it will make me a really happy customer if you can just point me in the right direction, at least? a link or an article.
I have manged to customize the whole website to exactly what I want, thanks to you guys! So thanks a million.
Again if you can please can point of the right direction, if not I totally understand.

Hello,

Try to add the following code snippet to the functions.php file in the child theme.

function vise_varenummer_katalogsiden() {
    global $product;

    if ( $product->get_sku() ) {
        echo '<div class="product-meta">Varenummer: ' . $product->get_sku() . '</div>';
        echo '<div class="grid-desc">';
        woocommerce_template_single_excerpt();
        echo '</div>';
    }
}
add_action( 'woocommerce_shop_loop_item_title', 'vise_varenummer_katalogsiden', 20 );

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.product-list-item .grid-desc{
    display: none;
}
.product-list-info{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.product-list-info .product-meta{
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

Kind Regards
XTemos Studio

Thank you so much! That works perfectly, the only thing is that in grid view the SKU comes before the short description. Can I swap the order of them?

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.product-grid-item{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
.product-grid-item .product-meta{
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	    -ms-flex-order: 1;
	        order: 1;
}
.product-grid-item .btn-add{
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	    -ms-flex-order: 2;
	        order: 2;
}

Kind Regards
XTemos Studio

Thank you very much!

You are welcome, we are always happy to help you, write us when you have any difficulties or issues with our theme.

And we would be glad if you will rate our theme with 5 stars on Theme Forest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

Thank you in advance 🙂

[Author]

Posts