Thumbnail for Search Results

Hello everybody

I would like to know if you have a way to add Thumbnail when we make a research on a website ?
And also how we can change the size of the research box ? ( It’s to big on the menu )

My Link is : http://fiola.legtux.org

Thank you for your help

David

Hello David,

  1. I don’t think that there is an easy way to do it without coding, unfortunately.

  2. Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

.search-form input {
    padding: 4px 10px;
    border-radius: 5px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you for your answer it’s works perfectly well :slight_smile:

I have some other question :

How can i solve this problem , there is the text who go outside the button ( In french the text is longer )


For the Thumbnail i have think about it and you propose on your theme or woocommerce a Search Box for Product ( Cf Picture ) , How can i put this research box instead of the other classic research ? In the product research there is thumbnails

The code for the classic Search box in the menu is

function add_search_box($items, $args) {

    ob_start();
    get_search_form();
    $searchform = ob_get_contents();
    ob_end_clean();

    $items .= '<li>' . $searchform . '</li>'; 
    return $items;

}
_add_filter(‘wp_nav_menu_items’,‘add_search_box’, 10, 5);

Thank you for your help

Sorry The Image is here for the 2nd question

Thank you again

Hello David,

You can try to use this CSS code as a workaround to resolve your button issue:

.add_to_cart_button::before,
.cart-button::before {
	margin-right: 3px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	padding-right: 2px;
}

Please create a new topic for each of your other actual issues to keep forum in good order and make it easier to help you.

Kind Regards, Roman.

Thank you Roman for your answer ,
I have add the CSS but it still have the problem

Do you have an other idea please ?

Thank you very much for your help

Hello David,

I don’t see this problem on your home page (I tried different resolutions), can you please specify where exactly you see it and how can I recreate it?

Kind Regards, Roman.

Hello
Sure , In this page http://fiola.legtux.org/produit/duo-bagues-paris , you have the Associate Products , when you reduce the size of the page ( For example middle of the screen or 3/4 ) the " Add to cart " button of the associate products go outside the sqaure

thank you for your help

Hello David,

As a workaround, you can try to use this CSS code:

.add_to_cart_button {
    white-space: normal !important;
}

.add_to_cart_button:before {
    display: none;
}

…instead of this:

.add_to_cart_button::before,
.cart-button::before {
	margin-right: 3px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	padding-right: 2px;
}

But please note that it will disable cart button icon.

Kind Regards, Roman.

Hello , Thanks for your answer

It’s work but as you says it disable cart button icon ,

Do you think is it possible to disable it only for associated products instead of all the products ? because the problem is located only in associated products

Thanks

Okay, try this code to target related product buttons only:

.related.products .add_to_cart_button {
    white-space: normal !important;
}

.related.products .add_to_cart_button:before {
    display: none;
}

Kind Regards, Roman.

Hello ,
Thanks it works perfectly :slight_smile:

Thanks again

Great! You are welcome :slight_smile:

Kind Regards, Roman.