Posted 1 year ago #
Hi I have just added woocommerce to my custom theme and I am wondering is it possible to edit the appearance of the shop and product page with custom css?
I would like to adjust the layout by moving the breadcrumbs under my main nav bar, move the sorting drop down menu position as well as customize appearance with my css.
Can anyone point me in the right direction?
TIA
Posted 1 year ago #
I see there is an option in the general settings to Enable WooCommerce CSS styles. And once I deselect this I can use custom css.
But can anyone tell me how to reposition the breadcrumbs and the sorting drop down box mentioned above?
TIA
Posted 1 year ago #
Ok so I now know that to do what I am trying to achieve I need to use hooks
http://www.woothemes.com/woocommerce-docs/codex/third-party-custom-theme-compatibility/#section-1
I also edited some code to help me move the breadcrumbs to were I wanted to put them:
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
add_action('woocommerce_before_shop_loop', 'woocommerce_breadcrumb', 20 );But I can't figure out how to edit the position of the sort products by drop down menu.
I have tried:
remove_action( 'woocommerce_after_shop_loop_products', 'woocommerce_ordering', 20 );
remove_action( 'woocommerce_after_shop_loop_products', 'woocommerce_ordering', 10 );and a few other hooks but no joy removing it
Posted 1 year ago #
I found out how to fix my problem.
In the woocommerce folder there is a file called:
woocommerce-hooks
which has all the hooks tags.
Posted 1 year ago #
Thanks Steve for asking and answering!
Posted 1 year ago #
The link is no longer active:
http://www.woothemes.com/woocommerce-docs/codex/third-party-custom-theme-compatibility/#section-1
Posted 11 months ago #
Thanks, this helped me out!
Posted 8 months ago #
I am stupid and can't use my own brains!
I need to delete catalog sorting option in the end of shop page (in woo-pagination) and place it before products grid.
I tried to use hooks - no success...
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
remove_action( 'woocommerce_pagination', 'woocommerce_catalog_ordering', 20);
add_action( 'woocommerce_pagination', 'woocommerce_catalog_ordering', 20 );Can anybody, please-please, please help...
Posted 8 months ago #
Hi pansyflower,
If I remember correctly you cannot remove the catalog sorting option at the end of the shop page without causing problems somewhere else (I'll try find out why when I get home)
Also to place the sorting option at the beginning of the products grid I think you should use one of these (again I'll have to confirm when I get home):
add_action( 'woocommerce_before_main_content', 'woocommerce_catalog_ordering', 20 );
Or
add_action('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20 );
I did come across some issues with this to, I remember the drop down appearing on a single products page. (May be some code could stop this from happening)
In the end I settled for it leaving it the way it was, but that's not to say it can't be done.
Posted 8 months ago #
Hi, Steve, thank you greatly!
I tried
add_action( 'woocommerce_before_main_content', 'woocommerce_catalog_ordering', 20 );
and I see now the sorting almost in the correct position - can I align it to the right?
and still I can't delete it from the botton of the shop page...
Posted 8 months ago #
To remove try:
remove_action( 'woocommerce_after_main_content', 'woocommerce_catalog_ordering', 20 );
Or
remove_action('woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 20 );
(if the above fail open the woocommerce hooks file search for the catalog_ordering and find out were its been added, then copy the line where its been added to your functions.php and change add_action to remove_action - I think)
You can align it by adding custom hooks I think and then apply css to the hooks, like in the link above. I can't remember how I did this so Ill have to wait until after work and view my code and confirm.
Posted 8 months ago #
You know I played and the code below worked to remove it:
remove_action('woocommerce_pagination', 'woocommerce_catalog_ordering', 20 );
Now I need only to align it to the right and move pagination as well to the top!
By the way, did you try to remove the billing information section at the checkout page? I am fighting with this as well and I see now I can use hooks... THANK YOU!!!
Posted 8 months ago #
for some reason on my all products page its doubling the catagories.. have no idea why ='C http://lemuelcouture.com/?post_type=product here is the page that its doing it on..
Posted 8 months ago #
may be you've put into the footer widget with your product categories?
Posted 8 months ago #
nothing is in the widgets expect search.. ='(
Posted 8 months ago #
im also using the responsive theme if that helps
Posted 7 months ago #
Hi i have a problem using woocommerce.. I don't Need that woo-navigation under all products. I want to display all products in a same page.. can anybody help me?
Posted 7 months ago #
Hi i have a problem using woocommerce.. I don't Need that woo-navigation under all products. I want to display all products in a same page.. can anybody help me?
Posted 6 months ago #
Just wanted to say thanks :-)
Posted 6 months ago #
just wanted to say thanks ;)
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20 );
remove_action('woocommerce_pagination', 'woocommerce_catalog_ordering', 20 );
worked fine for me
Posted 6 months ago #
Thanks
Posted 6 months ago #
GCF, thank you so much! that's perfect!
Posted 5 months ago #
Hi
I want to move the sort from the bottom to the top of the products listed. I did review the top answers but Im not sure about hooks at all.
Did the code below work and where do I PUT IT. Please help. My client is not happy with it the way it is. http://www.3dfastenersplus.com
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20 );
remove_action('woocommerce_pagination', 'woocommerce_catalog_ordering', 20 );
Posted 5 months ago #
yep, try this:
remove_action('woocommerce_pagination', 'woocommerce_catalog_ordering', 20 );
add_action ('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20);also you may rename the fields of sorting... )) rock!
Posted 5 months ago #
Does anyone know how to center the table of products on the main shop page? Right now, everything is aligned to the left and there is quite a bit of unnecessary margin at the top. I had the latter problem with the single product pages, but I eliminated the top margin with this code, which I added to CSS inserts:
div.product.status-publish {
margin-top: -130px;
position: relative;
}
There must be something similar I can use to customize the layout of the main shop page. I'm just not sure what the first line should say. Any help? Thanks!
http://www.sarahfranciswines.com/purchasewine/visitwineshop/
Posted 3 months ago #
This forum has been very helpful for moving the sort / drop down menu from the bottom to the top on product archive pages.
However, Steve has raised a crucial point, which still has not been resolved....
"I did come across some issues with this to, I remember the drop down appearing on a single products page. (May be some code could stop this from happening)
In the end I settled for it leaving it the way it was, but that's not to say it can't be done".
This is exactly the problem that is now bugging me!
I have started a new thread on this matter, but no one has replied with any solutions to date....
here is the link to my thread....
Any help on this would be very much appreciated,
Thanks.
Posted 2 months ago #
Woocommerce just updated to 2.0.1 and started adding a duplicate dropdown sorting option on the Shop page. I simple commented out a line in the woocommerce_hooks.php file. This is the line that I commented out:
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
After I commented it out...woocommerce was only generating one dropdown. They must have this in two different places in the code.
If you need any help, you can contact us at http://www.cohesivewebdesigns.com
Posted 2 months ago #
Just an FYI but I have found that editing the core woocommerce code is not a great idea. You can run into problem when upgrading. I had this same problem and instead added the following to my themes functions.php
'remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );'
Which took care of it
Posted 1 month ago #
Dear steve where does one past the bread crumb code, which makes it appear in another position?
I need the template or the file
Posted 1 month ago #
Hi,
I'm developing a website running woocommerce and Blanco theme bought from themeforest. the address is http://dev.emotion7.ro/fashaddictuk
I want to setup the what's new page same as the shop page, the only thing i want different is to display the products in descending order by date (show the newest products).
Is that possible ? to assign a product page to multiple pages and sort differently ?
Thanks,
Vlad
This topic has been closed to new replies.
