Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 6, 2023 at 1:57 am #1377778
    akhurst_machinery

    Hello,

    We’re building our online store for parts and tooling, but I’m having some issues with the template.

    1- Product Pages
    When we don’t use the advanced layout feature, the Woccommerce Product page goes crazy. The right sidebar and related products go to the footer.
    We need to present the same way we do on our main website for machine products. (https://www.akhurst.com/product/cantek-mx340m-automatic-edgebander/). How can I do this?

    https://snipboard.io/3GuYPe.jpg
    https://snipboard.io/VOSrIW.jpg
    https://snipboard.io/pEGSnJ.jpg

    And, how can I get these fonts bigger? I’m afraid of changing this at the Enfold Theme tab and making a mess. And also, the description title “description” is duplicated.
    https://snipboard.io/Jzv4wT.jpg

    2- Home Page
    I saw a few other demos from Woocomerce and Enfold and I wish I could create a different home page where I can directly show Product Filters and maybe a few Top Products we need to promote over the year. Can you upload this page template inside mine? I can edit it later on my own.
    https://kriesi.at/themes/enfold-shop/shop/

    This is something that we’re looking for, but I don’t know how to bring these elements to a page.
    I’m not even talking about the design, which looks great by the way, but I’m talking about bringing these features to a single page (picture (description, filters on the sidebar, related products, etc.

    Home

    I’m providing the credentials for our new store so you can see it better. Please, let me know if it works fine.

    Thank you!
    Leo

    January 6, 2023 at 2:06 am #1377779
    akhurst_machinery
    This reply has been marked as private.
    January 8, 2023 at 6:04 pm #1377993
    Mike

    Hi,
    Thanks for your patience,
    #1 to move the woo product sidebar from under the product to a classic sidebar position please follow this thread.
    #2 I couldn’t add the page you linked to because this is an automatically created page, not an ALB page. It is the woocommerce shop page on your site it is ▸ https://sandbox.akhurst.com/shop/
    you will notice the message at the top of the page: the default WooCommerce Shop Overview and therefore does not support the Enfold advanced layout editor
    Enfold_Support_0036.jpeg
    If you want to create this page on another page use the Product Grid element
    Enfold_Support_0037.jpeg

    I don’t see a sidebar on the example page that you linked to, but you can create a ALB product page and add an image and use the product purchase button
    product_purchase_button.jpeg
    and then below that use a product slider with 3 columns
    product_slider_with_3_columns.jpeg
    the next section would have a simple button to a category archive page with a couple of images and linkes to different categories
    Enfold_Support_0040.jpeg
    the rest of the page follows this, so I think you get the idea.
    I hope this helps.

    Best regards,
    Mike

    January 12, 2023 at 3:18 am #1378333
    akhurst_machinery

    Hi Mike,

    Sorry for the late reply.
    Thanks for your support, as usual …

    Let’s go with one topic at a time so I can understand better what to do next.

    1- Related Products

    You can see from the print screen that the related products are going to the bottom of the page together with the footer.
    https://snipboard.io/Y3J9U0.jpg

    How can I bring them to the top? Like we have on our pages made with Advanced layout?
    https://snipboard.io/EO8dZK.jpg

    Thank YOU!

    January 12, 2023 at 9:15 pm #1378492
    Mike

    Hi,
    The Related Products is not in the footer, it is in the proper section above the footer, it has a black background color because you picked this color in the
    Enfold Theme Options ▸ General Styling ▸ Alternate Content ▸ Alternate Content Background Color
    shop_product_related_products_background_color.jpeg
    please change this color to white or whatever color you want it to be.

    Best regards,
    Mike

    #454e57

    January 12, 2023 at 10:05 pm #1378496
    akhurst_machinery

    Oh God! Great news! But …
    I still need some help with this topic:

    1- Alternate content – background color change.
    When I use white for the related products area, my breadcrumbs area just below the main header also goes white.
    https://snipboard.io/pdc9wm.jpg
    Is there a way where the breadcrumbs area keeps the same way? It’s just because all of our websites are designed this way.
    https://snipboard.io/reQIbw.jpg

    2- How can I get the same sidebar position as our main website?
    I used the CSS and PHP codes you sent and tried everything with the values, but I could bring the line separator to the top and the vertical at the same position as our main website.
    https://snipboard.io/reQIbw.jpg
    https://snipboard.io/M6XJxD.jpg

    3- how can show 5 related products and the arrow to scroll for more?
    It’s showing 4 as default and I don’t know where to find this setup.
    https://snipboard.io/mcaJF6.jpg

    Thank YOU!
    For now ;)

    Leo

    January 13, 2023 at 12:08 am #1378503
    akhurst_machinery

    And … Is there a way to bring the related products up? Like we have using the advanced layout, where it shows together with the product content and not outside, so the sidebar shows on the whole page?
    https://snipboard.io/hIFKAD.jpg
    https://snipboard.io/BL1NvC.jpg

    January 13, 2023 at 2:03 pm #1378584
    Mike

    Hi,
    Thanks for your questions, to have the sidebar line separator go to the top you can use this css:
    You can show 5 columns of related products with this woo shortcode [related_products columns="5" limit="5"] but a scroll or slide option is not available.
    So to add this to the product summary area we can add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    add_action('init','five_related_products_after_single_product_summary', 50);
function five_related_products_after_single_product_summary() {
	add_action( 'woocommerce_after_single_product_summary', 'add_five_related_products', 25);
}
function add_five_related_products() {
	if(is_product()) {
	echo do_shortcode( '[related_products columns="5" limit="5"]' );
	}
}

    and this css:

    .shop_columns_3 .products.columns-5 .product {
    margin: 0 1% 1% 0;
    width: 19%;
}

    this is the expected results:
    add_5-column_related_products_section_in_product_summary_area.jpeg
    to hide the original related products area add this css:

    #top.single-product #main #av_section_1 {
	display: none;
}

    Best regards,
    Mike

    January 13, 2023 at 9:14 pm #1378641
    akhurst_machinery

    Thanks, Mike.

    I’ll try this … but I don’t know if we have a child theme installed.
    Is there a plugin where I can add/manage CSS in the functions.PHP file rather than having a child theme?
    What is the best practice for a regular guy like me?

    And, about the sidebar line adjustment, I think you forgot to send me the CSS ;)

    Thank YOU!

    January 14, 2023 at 1:49 pm #1378672
    Mike

    Hi,
    Thanks for the feedback, you are correct I forgot to add the css:

    #top.single-product .template-shop {
    padding-top: 0;
}
#top.single-product .template-shop .product .single-product-main-image,
#top.single-product .template-shop .product .single-product-summary {
	padding-top: 50px;
}

    If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and allows you to export and import your custom code snippets to other sites that you may have or as a backup.

    Best regards,
    Mike

    January 16, 2023 at 9:38 pm #1379018
    akhurst_machinery

    Great!
    The sidebar quick CSS worked just fine! Thank you ;)

    And thanks for the PHP plugin recommendation.
    I already conformed with the developer and we’re getting it today!

    _____

    And about the other topic (for now ;)… Is there a way to bring the related products up? When using the advanced layout in our other websites, the related products are “inside” the product main page, and not as “alternate content”.

    https://snipboard.io/8Q1DIl.jpg
    https://snipboard.io/ZR7XTn.jpg

    January 17, 2023 at 1:03 pm #1388044
    Mike

    Hi,
    On product pages that you created with the Advanced Layout Builder, you would need to use the Related Products element, so you should be able to place it where you want on the page, correct?
    Perhaps I don’t understand correctly, please create an example in your sandbox sie and link to it so I can see what you mean by “bring it up”.

    Best regards,
    Mike

    January 19, 2023 at 4:10 pm #1391379
    akhurst_machinery

    Hello,

    On our corporate websites, where we sell our machines, all “products” are created individually one by one using the advanced layout. That’s why we have the “perfect” design for every element on the page. Ok.
    But now that we’re launching the online shop for parts, we’re importing over 2 thousand products at once in bulk, so we’re not using the advanced layout, we’re using the default Woocommerce single product page layout.

    So …

    BODOR H Series Sheet Fiber Laser Cutting Machine

    What we’re doing on all our websites. Perfection using the advanced layout.

    https://snipboard.io/rxS93C.jpg
    And here, you can see that the related products are not part of the single-page content, it goes to the alternate content page location.

    Is there a way to create a page layout using the advanced layout and be the default woocommerce for single products?
    If yes, that problem would be solved. If not, probably a CSS to bring this up.

    Thank YOU!

    January 24, 2023 at 1:05 am #1394853
    akhurst_machinery

    Hello!
    Any feedback regarding my post?
    Thanks, Leo

    January 24, 2023 at 7:29 pm #1394986
    Mike

    Hi,
    Thanks for the feedback, for some reason your post on the 17th didn’t show on my feed so I’m glad that you added another post.
    Thanks for the explanation, so originally you had created products with the Advanced Layout Builder and now you are going to import 2k more products in bulk which will make them default Woocommerce single product page layout.
    So the short answer is no, you can not create a layout with the ALB and have it as the default Woocommerce single product page layout.
    Above you asked how to add 5 column related products to your product pages, this should add the related products in the place that you want them, did you try it?
    I couldn’t test because your sandbox site doesn’t allow the child theme functions.php to be edited.
    Try the function to add the new related products and then add the css to hide the old one in the alternate content area.

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.