Woocommerce product search result page layout

Hi there @tuba121 ??

Thanks for reaching out to Woo Support!

I am creating a custom search bar with a category dropdown in my woo-commerce site so how do I fetch the exact design(HTML, CSS) of products in my search result as I am getting through shortcodes like [product], etc. Do I need to make Custom Search Results Template? Is there any way to fetch the design that woocommerce shortcodes call? can I call that exact design in my code?

I understand you are creating your own search plugin (not customizing an already existing one).

As a next step, I’d recommend checking out the plugin handbook.

Moreover, it might be insightful to examine the code of already published search plugins. Linked here are a few results from the www.remarpro.com repository.

I hope this is helpful! Please let us know if you have any further questions about this matter, or if we misinterpret your concern in any way. We will be happy to help you further.

Yes you understand well I am trying to create own plugin.Thanks I must check your provided link . can guide me little about it more because I am beginner.

• This reply was modified 10 months ago by Tuba Saif.

I go through your links plugin handbook etc, what i get is to make own function. right? I am using this function wc_get_template_part(‘content’, ‘product’); but it’s not fetching the exact design.What i can do to fetch exact design is their any function or i need to do some css etc.

• This reply was modified 9 months, 4 weeks ago by Tuba Saif.
• This reply was modified 9 months, 4 weeks ago by Tuba Saif.

Hi @tuba121,

The function you’re using, wc_get_template_part('content', 'product') is indeed used to pull in different parts of the WooCommerce templates. However, it might not provide the exact design you’re seeing with the [product] shortcode, as the shortcode has additional styling or layout properties.

If you want to replicate the exact design, you need to look into the CSS and HTML that are being applied when you use the [product] shortcode. You can inspect the code in your browser to see what classes and styles are being applied. Then, you can apply these styles to the output of your custom search results.

For reference, these particular forums are meant for general support with the core functionality of WooCommerce itself. For development and custom coding questions, it’s best to ask for insight related to those on either the WooCommerce Advanced Facebook group or the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

• A local web developer
• Codeable.io
• WooExperts

I wish I could help more, but hopefully, this gets you going in the right direction to get some further insight/information.

@shameemreza Thank you so much for your answer .plz tell me can i use this shortcode for my above requirement [product_page] For example: [product_page id="99"] and fetch id’s dynamically.

Hello tuba121,

Thank you for your reply.

Yes, you can indeed use the [product_page] shortcode to display a specific product by ID on a page, and the shortcode you’ve mentioned, "[product_page id="99"]", will show the product that corresponds with ID 99 on the page where you insert the shortcode.

However, it’s important to note that while the [product_page] shortcode will display the product with its default WooCommerce layout if you are looking for a custom design or a specific layout, the shortcode alone will not cover the design and layout part.

This is where a professional web developer can assist you in creating a custom template for your product page.

As per your Support Policy, we do not provide support for custom code, but I am here if you have any other WooCommerce related questions. ??

Best regards.

@doublezed2 okay Thanks for sharing valuable information.

Hi @tuba121,

I’m glad we were able to help! Should you have further inquiries, kindly create a new topic here.

Thanks!

@shameemreza Thank you so much . I am actually trying to create plugin for ajax search with category dropdown using jquery ui autocomplete for my woocommerce site. It’s almost done but i am facing some design issues . can i ask here , if not then on which platform i can ask.

Hi @tuba121,

For reference, these particular forums are meant for general support with the core functionality of WooCommerce itself. For development and custom coding questions, it’s best to ask for insight related to those on either the WooCommerce Advanced Facebook group or the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question.

I wish I could help more, but hopefully, this gets you going in the right direction to get some further insight/information.