How is it possible to place "Add to Wishlist" in grid view?

Hi mr.zatan

try adding this code at the end of functions.php file of your theme

if( ! function_exists( 'add_wishlist_button_to_loop' ) ){
	function add_wishlist_button_to_loop() {
		echo do_shortcode('[yith_wcwl_add_to_wishlist]');
	}
}
add_action( 'woocommerce_after_shop_loop_item', 'add_wishlist_button_to_loop' );

Let me know if this helps
Have a nice day ??

Sorry, I asked the wrong.

Want something like this.

https://goo.gl/qRVCQa

Hi again,

sorry for the misunderstanding ??

To achieve your goal, you’ll need to overwrite wishlist-view.php template; simply copy it from yith-woocommerce-wishlist/templates/ and paste it in your theme root.

Then, you’ll need to change it; for example, I can suggest you to change table with an ul, and stylize every li to show it in a grid (maybe a percentual width, display block, and some margin?)

Let me know if this helps
Have a nice day!

I try to do it, can’t do it.

May have to edit Code.

Please help.

Hi again,

The best solution to your problem, is overwrite template, css and js of the plugin, and make a custom HTML structure.

I can’t do this for you, because it would require a lot of work and time.

Anyway, you can use this css to approximate what you want to obtain

.wishlist_table{
	border: none !important;
}

.wishlist_table thead{
	display: none;
}

.wishlist_table tbody{
	margin: 0 -15px;
}

.wishlist_table tr{
	border: none!important;
	display: block;
	float: left;
	width: 25%;
	padding: 0 15px;
	position: relative;
}

.wishlist_table tr:nth-child(4n + 1){
	clear: both;
}

.wishlist_table tr td{
	border: none!important;
	display: block;
	text-align: center!important;
	padding: 5px 0!important;
}

.wishlist_table tr td.product-remove{
	position: absolute;
	top: 0;
	right: 15px;
}

.wishlist_table tr td.product-thumbnail a{
	max-width: 100%!important;
}

Simply add these rules at the end of the “style.css” file of your theme, but please consider it as a rough workaround.

Here you can see my result with default Twenty theme

Let me know if this helps
Have a nice day ??

Wow..I can do it.

Thank you very much!

Hi

Great! Marking this as resolved.

If you have appreciated our plugin and our help, please consider buying our premium version: here you can find more information about it, and here you can try a live demo of the plugin. ??

Have a nice day ??

Love the css you wrote for the grid view. Only one issue though, it stretches the small thumbnail so in my case, the image is distorted.

Wishlist Example

Any advice on how to fix that?

Hi zkay

I’m glad to know you appreciate my little workaround ??

you can try adding just a couple line of code to the previous css

.wishlist_table tr td img{
    width: auto!important;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

Let me know if this helps!
Have a nice day ??