I want to change the button and its placement slightly.. where do I do that?

  • Resolved eqr

    (@eqr2020)


    4 years, 5 months ago

    Hello!
    First of all, thank you for a lightweight Wishlist plugin that doesn’t come with a ton of bloat! Features just work straight out of the box, fast and problem free. Loco Translate plugin also worked nicely to translate some of the strings.

    Customizing the template wishlist page was also simple. Great stuff, thank you!

    I’d like to customize the look more though.

    1. General styling: The button has inherited colors/style from somewhere (a little unsure of this, but can override with some !important styling… though not preferred). What classes should I ideally use to style the button with?

    2. Move the button. Right now, it’s plastered up against the Add to Cart button on product page. I’d like to at least add a space between them, or even better, move it down beneath it with a bit text too like this: https://imgur.com/a/yONYlOR
    Similarly, I’d also like to move the button on the archive page, ideally to the top right corner of the product, but I’m not sure where to find/grab/change this stuff.

    Side-note: I’ve got some experience with PHP and quite a few years with general web development, but this is my first WordPress/WooCommerce project.

    Thank you and best regards, EQR

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Joris van Montfort

    (@jorisvanmontfort)

    Hi,

    If you have the site up on a test location I can have a look at your situation and see if I can help. If you can’t get the button where you want using CSS you will probablby need to hook it to some other WooCommerce hooks.

    By default these hooks are used:

    
add_action( 'woocommerce_after_shop_loop_item', 'jvm_woocommerce_add_to_wishlist', 15 );
add_action( 'woocommerce_after_add_to_cart_button', 'jvm_woocommerce_add_to_wishlist' );

    For the product page you could add a br tag with this PHP snippet (tested):

    
add_action( 'jvm_woocommerce_wishlist_before_add_to_wishlist', function() {
    if (is_product()) {
        echo '<br/>';
    }
});

    Change the CSS class to display as a text button with this:

    
add_filter( 'jvm_add_to_wishlist_class', function($class) {
	return 'jvm_add_to_wishlist button text';
});

    Not sure if your theme uses the button class, but a lot of themes do.

    You will need to modify the CSS to show the icon also:

    
.single-product .product .summary .jvm_add_to_wishlist .jvm_add_to_wishlist_heart {
  display: inline;
}

    For the category page you will probalby need to hook into a different WooCommerce hook. Something like this (not tested):

    
add_action( 'woocommerce_before_shop_loop_item_title', 'jvm_woocommerce_add_to_wishlist')

    PHP snippets go into your (child) theme’s function.php.

    A small donation for support is always appreciated: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VXZJG9GC34JJU

    I hope this helps.

    Kind regards, Joris

    Thread Starter eqr

    (@eqr2020)

    Thank you so much!

    I had to fiddle a bit with it, turns out my theme uses slightly different hooks for the catalogue, but I think I’m getting the hang of it now. ??

    Plugin Contributor Joris van Montfort

    (@jorisvanmontfort)

    Good to hear you succeeded.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘I want to change the button and its placement slightly.. where do I do that?’ is closed to new replies.