Wishlist button not showing above the add to cart button?

Hi @thesaintindiano,

#1. Seem the theme you’re using doesn’t use the standard action hooks from WooCommerce. So, our plugin doesn’t work correctly.

In this case, please use the shortcode [woosw] to show the button where you want.

#2. Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

 #mega-menu-primary {

    display: flex;

    justify-content: center;

    align-items: center;

}

#mega-menu-primary .menu-item {

    order: 1;

}

#mega-menu-primary .menu-item.woofc-menu-item {

    order: 2;

}

.woosw-menu-item:before {

    content: '\f004';

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    10px;

}

.woosw-menu-item .woosw-menu-item-inner:after {

    left: -15px;

    right: auto;

}

And the result https://www.screencast.com/t/qYLWuIBdac

Regards,

• This reply was modified 3 years, 6 months ago by miemie.
• This reply was modified 3 years, 6 months ago by miemie.
• This reply was modified 3 years, 6 months ago by miemie.
• This reply was modified 3 years, 6 months ago by miemie.
• This reply was modified 3 years, 6 months ago by miemie.
• This reply was modified 3 years, 6 months ago by miemie.

Hi @thesaintindiano,

#2. Please add again below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

#mega-menu-primary {
    display: flex;
    justify-content: center;
    align-items: center;
}

#mega-menu-primary .menu-item {
    order: 1;
}

#mega-menu-primary .menu-item.woofc-menu-item {
    order: 2;
}

.woosw-menu-item:before {
    content: '\f004';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.woosw-menu-item .woosw-menu-item-inner:after {
    left: -15px;
    right: auto;
}

And the result https://www.screencast.com/t/qYLWuIBdac

Regards,

Hi @miemie,

I’m using neve theme and use the following official code to display ADD TO CART button on shop/archive pages.

function custom_add_cart_button () {
    add_action( 'woocommerce_after_shop_loop_item_title','woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'after_setup_theme', 'custom_add_cart_button' );

1) How could I change it to display under Add to wishlist button? I tried changing priorities but with no success. Please find the image link after adding the given CSS and the resultant change.
https://pasteboard.co/K1OCmoP.png

2) The above code doesn’t change the order of wishlist being displayed before the cart. I wanna remove the wishlist text to just display the heart font awesome icon and number on the right top.

Regards & Thanks
Indiano

One more thing, this setting distorts the mobile right wishlist menu.

https://pasteboard.co/K1PrBaA.png

Please add below CSS code:

#mobmenuright {
    display: flex;
    flex-direction: column;
}

#mobmenuright .menu-item-type-woofc {
    order: 2;
} 

#mobmenuright .menu-item-type-woosw {
    order: 1;
}

#mobmenuright .menu-item-type-woosw:before {
    display: none;
}

#mobmenuright .menu-item-type-woosw a {
    display: inline-block;
}

#mobmenuright .menu-item-type-woosw a:before {
    content: '\f004';
    font-family: FontAwesome;
    font-weight: 900;
    margin-right: 10px;
    display: inline-block;
    color: #fff;
}

And the result https://www.screencast.com/t/PcUyCBFqg

Hi @wpclever,

The above code doesn’t change the order of wishlist being displayed before the cart on the desktop. I also wanna remove the wishlist text to just display the heart font awesome icon and number on the right top.

Please check the image to see the cart, wishlist menu order.
https://pasteboard.co/K1OCmoP.png

Regards
Indiano

@thesaintindiano

Above code used to change the position of menu items for the mobile screen.

For the desktop, please add below CSS code:

#mega-menu-primary {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

#mega-menu-primary .woosw-menu-item a {
    font-size: 0;
}

#mega-menu-primary .woosw-menu-item .woosw-menu-item-inner:after {
    top: -22px;
    left: 10px;
}

#mega-menu-primary .woosw-menu-item:before {
    display: none;
}

#mega-menu-primary .woosw-menu-item .woosw-menu-item-inner:before {
    content: '\f004';
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 16px;
    margin-right: 10px;
}

And the result https://www.screencast.com/t/jrnO07GjtwdZ