Avada Woocommerce pages 100% full-width with 1 line of code (a single changed word, actually)

Finally I discovered how to make Avada’s woocommerce pages 100% full width. And it only took modifying a single word, in one line of code, in the appropriate theme file.

You’ll need to access the following template, which you can do from the WordPress editor:

Avada: class-avada-layout.php (includes/class-avada-layout.php)

Now scroll down and find the following php function (you can do a CTRL+F for this easily enough):

public function is_hundred_percent_template

At the very end of the function where it says return: false; change this to return: true; and you’re done.

Note: This will force all of your pages to full-width, so this fix may not be “perfect” for everyone.

However, it’s the most straightforward way to fix Avada’s asinine code injections, which wrap around any full-width “main” class wrappers you attempt to use (such as in a custom child theme template) thereby destroying your ability to go full width even with a custom template.

Feel free to let me know if you have any questions. Cheers!

Share This Article:

Liked this article? Sign up for more.

Steve believes your greatest creation happens when you combine art and science. Join his 10K+ followers on social media and email today.

100% Privacy. No spam. Unsubscribe anytime.

Related Posts

9 thoughts on “FIXED: Woocommerce 100% Full Width on Avada

  • the only problem is you have to stop updating your theme or change that code every time when it gets updated.

    • This is true and there may be a more “permanent” solution out there. For the time being, however, this is an extremely fast fix to implement and not terribly difficult to repeat when making theme updates.

  • Hello,
    For some reason I can not find the class-avada-layout.php file. Can you please let me know how to look for it exactly? I have “Avada” selected, I checked subcategory “Templates”, but I do not have this php file 🙁
    Thanks!

    • Julia, absolutely! First you will navigate to Appearance -> Editor and select “Avada” from the drop down menu. Once you are there, you must click on the “Includes” drop down (there will be a little arrow indicating you can ‘expand’ this directory). After that you will simply scroll down and find the file there.

    • Ben, I seem to recall running into issues when attempting to move this to a child theme. Pretty sure this became one of those annoying ones where every time the theme was updated, this also had to be manually updated. It may be that I’m not remember correctly, however, and I have to imagine there’s a way to move this over to a child theme if you’re motivated.

Leave a Reply