WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: Woocommerce] - Customize (30 posts)

  1. Steve
    Member
    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

  2. Steve
    Member
    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

  3. Steve
    Member
    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

  4. Steve
    Member
    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.

  5. gabemott
    Member
    Posted 1 year ago #

    Thanks Steve for asking and answering!

  6. gabemott
    Member
    Posted 1 year ago #

  7. katmac_aus
    Member
    Posted 1 year ago #

    Thanks, this helped me out!

  8. pansyflower
    Member
    Posted 1 year 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...

  9. Steve
    Member
    Posted 1 year 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.

  10. pansyflower
    Member
    Posted 1 year 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...

  11. Steve
    Member
    Posted 1 year 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.

  12. pansyflower
    Member
    Posted 1 year 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!!!

  13. lakedude007
    Member
    Posted 1 year 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..

  14. pansyflower
    Member
    Posted 1 year ago #

    may be you've put into the footer widget with your product categories?

  15. lakedude007
    Member
    Posted 1 year ago #

    nothing is in the widgets expect search.. ='(

  16. lakedude007
    Member
    Posted 1 year ago #

    im also using the responsive theme if that helps

    http://wordpress.org/extend/themes/responsive

  17. nich24
    Member
    Posted 1 year 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?

  18. nich24
    Member
    Posted 1 year 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?

  19. Pradeep
    Member
    Posted 1 year ago #

    Just wanted to say thanks :-)

  20. GCF
    Member
    Posted 1 year 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

  21. nich24
    Member
    Posted 1 year ago #

    Thanks

  22. RLL18
    Member
    Posted 1 year ago #

    GCF, thank you so much! that's perfect!

  23. tcohn
    Member
    Posted 1 year 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 );

  24. pansyflower
    Member
    Posted 1 year 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!

  25. thirstyreader
    Member
    Posted 1 year 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/

  26. treecycle
    Member
    Posted 1 year 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....

    http://wordpress.org/support/topic/how-do-i-remove-the-drop-down-menu-on-single-product-pages-woo-commerce?replies=1

    Any help on this would be very much appreciated,

    Thanks.

  27. Cohesive Web Design
    Member
    Posted 1 year 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

  28. rickgrevatt
    Member
    Posted 1 year 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

  29. newsgrip
    Member
    Posted 1 year 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

  30. emotion7studio
    Member
    Posted 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Topic