Support » Developing with WordPress » Custom single product page – syntax to call on other WC sections?

  • Hi

    In my quest to reject the bloat of page builders by no longer using them, I’m making some manual customizations to WooCommerce PHP theme pages instead.

    I’m trying to keep the customizations confined to one file: content-single-product.php.

    I’ve put the file in the appropriate file structure within my child theme. All good.

    I’m using a combination of calling on native WordPress code, and also embedding ACF fields with PHP, inside my own HTML structures.

    I know some code, but I don’t know PHP.

    I’ve been searching all day, but I can’t for the life of me figure out how to do the most fundamental thing:

    What is the syntax to simply call the following sections:
    * Product Reviews
    * Recommended Products, or Featured Products, etc.

    Looking at the first one, product reviews, I can clearly see which primary templates are involved with rendering product reviews (review.php and single-product-reviews.php).

    But my issue is this: What is the exact code for calling the product reviews to display in my custom HTML div inside content-single-product.php? I have no idea, and was not able to find any help relating to this. I imagine it is super short and simple, but I just don’t know it.

    I removed the product tabs (which usually houses the reviews) altogether, which is why I am adding the reviews separately as per my design, in my own custom HTML section. (The really odd thing to me is that when I view the template code for the Tabs, there is seemingly no reference to reviews at all…..so there was no hint to be found there).

    I don’t want to do this in functions.php. I am happy to customize this one file, content-single-product.php, as it needs to be customized for many reasons.

    So, what is the syntax for achieving what I need to? And can I use the same syntax anytime I need to call other sections in content-single-product.php that have their own php file (like product recommendations/related products, etc?

    I’d greatly appreciate some assistance here…

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator bcworkz

    (@bcworkz)

    That’s best answered in the dedicated WooCommerce support forum. Typically you could examine the template code where the same sort of output occurs and do the same. Especially with WooCommerce, what you’re looking for could be buried in an action hook. Just doing the same action could invoke other undesired code.

    You can determine what callbacks are called for a specific action hook by adding something similar to this to your template:

    <pre><?php
      global $wp_filter;
      var_dump( $wp_filter['action_handle_name']->callbacks );
    ?></pre>

    Replace ‘action_handle_name’ with the actual action name used. Output is organized by the priority argument. The key name below that is the function name, as is the value for the “function” key below that. If the key name is a long hexadecimal value, the function is anonymous and will not be useful for your purpose.

    Thread Starter jason9j

    (@jason9j)

    Thanks for your reply, bcworkz.

    Your information is definitely handy for the things I’m doing now, when I can figure out how best to use it. At the moment, I just get a null message citing the code line.

    I’m still trying to get to the bottom of it will post this to the WooCommerce forum – it slipped my mind to do this. Sorry about that.

    While I’m here on the WordPress site, my same question applies to non-WooCommerce templates: If I want to create a single blog post template (ie.e my own HTML layout structures at the top for feature image, title, meta, etc), do you know which file is best to modify?

    Thanks.

    Moderator bcworkz

    (@bcworkz)

    The best file to modify is the one you created yourself 🙂 If you mean which template file to copy to a child theme for modification, it depends on the theme. Review the template hierarchy. Most themes have single.php I think. You could start with a copy of that and modify as desired. All themes have at least index.php, that could work as well.

    If there’s an action hook on the template at the right place (more typical of Woo templates than themes), you might be able to utilize that hook without needing to modify any templates.

    Thread Starter jason9j

    (@jason9j)

    Hi – sorry for the late reply.

    Yep, you’re right. I’ll try to use hooks as much as possible. It seems I was somewhat on the wrong track before.

    A couple of questions I can’t find a definitive answer too – perhaps you might know – I might as well ask 🙂 –

    1. Do you see any issues (security, rendering, etc) with using the ‘include’ php function to call a custom section (my own php/html layout named .php), inserted by hook into a theme template?

    2. Is there a function/filter that can ‘wrap’ a hook area or section in HTML tags? For example, put <div class="my-class"> at the beginning, and </div> at the end? If I can track down such a function, I probably would never need to touch core the files.

    I haven’t been able to find a solid answer for those two things.

    Thanks again.

    • This reply was modified 1 month, 1 week ago by jason9j.
    Moderator bcworkz

    (@bcworkz)

    Using include is OK. You should use a full path for the file reference for the best compatibility. Relative paths can sometimes be problematic. It’s a bit deviant from the common practice of using get_template_part() (which in essence is a WP include function).

    Unless the HTML you want to wrap comes from one hook, you’d need to find two appropriate hooks, one to start, one to end. I assume you need to do this so it can be easily targeted with CSS. Are you sure there’s not some more advanced CSS way to target the HTML without adding your own div? :nth-child() maybe? Or grid or flex box model?

    Thread Starter jason9j

    (@jason9j)

    For the ‘wrap’ HTML function, I believe that CSS alone is insufficient, because I need a structural solution.

    Themes define content width, usually you can choose boxed, full width boxed, or full width.

    This creates issues with customizing an existing template if the desired design has 100% width sections, but centered content (ie. full width boxed). If you leave the global theme setting at full width boxed, any content you hook in there will be within that boxed container.

    In order to customize sections that have a different full width background color, or a wide/100% image or bg image, yet still have properly boxed content in containers, there is no choice but to set the theme settings for that page to 100% width with no boxing. I can now add sections with a design that are allowed to go 100%.

    Problem is, now the box/container has been taken away for everything else that the theme is presenting which I do not wish to touch. Even If I do wish to touch it, say, to alter the bg color for that particular existing section, I have no way to do so.

    So that is why I’m searching for a function to wrap HTML as follows (using BootStrap as an example):

    <div class="container-fluid my-class">
    <div class="container">

    Existing theme section content goes here.

    </div>
    </div>

    Now I have a fully hookable full width design with centered content (full width boxed), without everything I hook in being put in a box preventing 100% background design. The overall result to the visitor, however, will still be full width boxed. Sections on the page can now all have different 100% width background designs if needed.

    If I can figure out a function for this, then themes can be customized without touching them. At the moment, I have to copy the page in question to a child theme, and add the HTML manually.

    Moderator bcworkz

    (@bcworkz)

    It sounds like a child theme with altered templates is your best solution.

    Thread Starter jason9j

    (@jason9j)

    OK, understood. Thanks for all your help. Really appreciate it.

    Before I go, can I just go back a step and clarify something regarding the ‘include’ method I mentioned earlier: Do I need to include any special security declaration/access statement on the custom php file being included? Or can I just go straight into regular php/html structures without any special code or header preceding it?

    Thanks again.

    Moderator bcworkz

    (@bcworkz)

    When you include something, it’s almost as though the included content were copy/pasted in place of the include statement. Except the included file needs <?php to start. What else is required depends on what the file does. If it’s important the file not be directly accessed, we sometimes see

    if (!is_defined('ABSPATH')) {
        exit('Direct access not permitted.');
    }

    Very unlikely to be needed on a template file.

    It’s customary to place a descriptive comment header at the top for easier future maintenance, but it’s entirely optional.

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