• Hi,

    I have a website using OceanWP and WooCommerce and I’m having a little trouble customizing it.

    My question is: on the mobile layout (actually, on the deskptop layout too), I’d like to add some text before the WooCommerce cart icon. There seems to be plenty of space for some text, but I can’t find any setting that supports it. What are my options?

    This is the area I’m referring to, in the red rectangle:
    https://e.pcloud.link/publink/show?code=XZ0iblZc6s6E66w37J3MP0A8Pe1RfLPYuhy

    • This topic was modified 1 week, 6 days ago by svvhhk.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Shahin

    (@skalanter)

    Hello @svvhhk,

    Thank you for reaching out, and thank you for choosing OceanWP to build your website.

    The cart page can be a template, but the cart section itself is a shortcode provided by WooCommerce, which you use on that page.

    You can create a custom template before the cart shortcode by following these steps:
    Go to WP Dashboard > OceanWP > My Library.
    Create a new template and design it as needed.
    Copy the shortcode of the template you just created.
    Paste it before the WooCommerce cart shortcode on the cart page(you can find the cart page from WP Dashboard > Pages, edit it, and put your desired content before the cart shortcode).

    I’ve attached a screenshot for your reference here: https://ibb.co/WNKpPVMZ.
    Instead of that shortcode, you can put any content there.

    Hope this helps.
    Best regards,

    Thread Starter svvhhk

    (@svvhhk)

    Thank you, that looks both interesting and promising. I did create the new template and I got the shortcode, but somehow I have trouble finding the [woocommerce_cart] shortcode in the next step. When I open the Cart page, it looks nothing like your screenshot and even very different from what is there on the live webpage. It looks more like an example that come out of the box: it’s got beanies and sweaters in US $, none of these are in my product pages:
    https://e.pcloud.link/publink/show?code=XZcihlZFYja2td5gGHx83TU319A07YXD9jk

    Perhaps it’s worth mentioning that I’m using the OceanWP Child Theme. In the Customize > WooCommerce section I found some things that can be customized, but no trace of a woocommerce shortcode.

    Shahin

    (@skalanter)

    Hello @svvhhk,

    Thank you for reaching out,

    The cart page on your site is created as a block.
    You can remove it entirely and use the classic shortcode instead.

    However, the instructions I provided in my previous reply will work in both cases. You just need to place your desired content before the classic cart shortcode or the cart block:
    https://woocommerce.com/document/woocommerce-shortcodes/
    https://woocommerce.com/document/woocommerce-store-editing/customizing-cart-and-checkout/cart-block/

    Additionally there is another way to add that shorcode (from my library), so you can follow the steps explained in this link: https://docs.oceanwp.org/article/829-shortcodes-oceanwp-settings.

    Hope it helps,
    Best Regards

    Thread Starter svvhhk

    (@svvhhk)

    Ah, I think I get it now:
    https://e.pcloud.link/publink/show?code=XZOiulZMjmkfS3kxIhGvIixx6zVCJP50m4y

    Apparently I’m not on “classic experience powered by shortcodes”. I’ll make a backup and give it a try.
    Thanks for your help.

    Thread Starter svvhhk

    (@svvhhk)

    I’m afraid it is not exactly what I envisioned, or I’m doing it wrong.

    When I copy the newly created shortcode to the Cart page, it displays that content when you’re ON the cart page, but I want to display that text (or image, whichever works) in front of the icon that takes you TO the cart page. It is located at the same row as the navigation menu. In other words, an extra call to action before you’re on the cart page.

    Shahin

    (@skalanter)

    Hello @svvhhk,
    Thank you for reaching out,

    What you are trying to do involves modifying WooCommerce templates, which is beyond the theme’s control.

    You have two options:

    1. Use custom code to achieve what you need, but this requires PHP expertise. If you’re not familiar with PHP, you may need to hire a developer. If you have the skills, you can refer to the WooCommerce developer documentation (specifically the section on modifying the cart template).

    2. Search the WordPress plugin repository for a plugin that allows you to edit the WooCommerce cart template without coding.

    I hope it helps,
    Best Regards

    Thread Starter svvhhk

    (@svvhhk)

    Hi, I’m not a crack at it, but a little bit of php doesn’t scare me. I’ve tried to do a simple “hello world” type modification of the cart.php template, as well as mini-cart.php, but it doesn’t seem to change anything. Having OceanWP and its child theme installed, I did the same for mini-cart.php under oceanwp/woocommerce/cart, with equal amount of effect.

    Perhaps I should look for a plugin then.

    Hello @svvhhk,

    Thank you for reaching out,

    To do this, you may need to adjust the header’s template or use a custom hook to add content to the menu. You can find relevant instructions on customizing WooCommerce with OceanWP here: https://docs.oceanwp.org/category/83-woocommerce

    Alternatively, find this shortcode (it’s in Ocean Extra plugin), copy its code, and then customize it as you wish. Afterward, place your customized shortcode with a new name in the functions.php file in the child theme: https://docs.oceanwp.org/article/502-oceanwpwoocart-shortcode Then, use a custom header template and include your customized shortcode.

    However, the best way to customize that section is by using a third-party plugin.

    Alternatively, you can customize your template using the following steps:

    Before it, if you are unfamiliar with PHP, you can contact a PHP expert.
    Start with installing the child theme. Then, by using FTP or cPanel access (if didn’t use the localhost), Go to this directory: wp-content\themes\oceanwp\partials
    Find the template that you want to customize and copy that template file.

    Then head over to the same path on the child theme. There isn’t an entry folder as a default on your child theme, so you need to create a new one(one time).

    Paste that template there.
    Then you can edit the template on the new path in the child theme: wp-content\themes\oceanwp-child-theme\partials

    * Please check this screenshot: https://i.postimg.cc/sxjYTWyt/image.png.
    * Download child theme: https://docs.oceanwp.org/article/90-sample-child-theme.
    * Developer docs: https://docs.oceanwp.org/collection/19-developer-doc.

    Note: It’s working with the /woocommerce/ folder or root of the theme files.

    Hope it helps,
    Best Regards

    Thread Starter svvhhk

    (@svvhhk)

    Thanks so much for the info. I’m kinda busy right now, but I’ll try your suggestions later.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.