8000 OceanWP is Incompatible with Grid Layouts · Issue #434 · oceanwp/oceanwp · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

OceanWP is Incompatible with Grid Layouts #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
csmcneill opened this issue Jan 22, 2023 · 4 comments
Open

OceanWP is Incompatible with Grid Layouts #434

csmcneill opened this issue Jan 22, 2023 · 4 comments
Assignees
@eramits @MarkHollo
Labels
compatibility enhancement

Comments

@csmcneill
Copy link
csmcneill commented Jan 22, 2023 •
edited
Loading

Hi there! I'm reaching out from Automattic. We recently had a merchant ask for us to explore a potential conflict between OceanWP and Product Bundles.

With Product Bundles, it allows merchants to sell a combined set of individual products as a single product. Within it, there is a way to organize these individual products in a grid layout. However, when using the grid layout while the OceanWP theme is active, the grid does not work properly.

I discussed this with @helgatheviking, and they indicated the following:

I have dealt with this [...] and it's 200% the theme. The theme uses their own classes to style a grid instead of using WooCommerce loop classes. You can confirm this by looking at the <ul class="products> in the store and compare it to what [Product Bundles] generates when it prints its <ul class="products">. Unfortunately, the theme chose not to style ul.products like Woo core does, which makes it impossible to inherit their styles without additional work.

Steps to reproduce the behavior:

  1. Ensure a default theme like the Storefront Theme is active.
  2. Create a product that uses grid styling (e.g. bundled product in Product Bundles with at 3 least products and using the Grid layout).
  3. View the product page and note that the products appear in a grid.
  4. Change the theme to OceanWP 3.4.1
  5. The products are now shown in a single row.

Screenshots:
Markup on 2023-01-17 at 14:50:43

Markup on 2023-01-17 at 14:50:04
@helgatheviking
Copy link
Contributor

This impacts Product Bundles, Mix and Match Products, and possibly Composite products.... we all try to inherit the theme's grid styling, but when the theme uses non-Woo classes it is impossible.

Ocean is using their own loop/loop-start.php template and then styling the individual <li> via classes that don't exist in our plugins... ie:

body .oceanwp-row .span_1_of_3 {
  width: 33.33%;
}
body .oceanwp-row .col {
  float: left;
  margin: 0 0 1.25rem;
  padding: 0 .625rem;
    padding-bottom: 0px;
}

@csmcneill One thing that would help, would be if Woo had a filter for the opening <ul> classes.

Something else I need to explore is using loop/loop-start.php to open my grid loop... though both PB and MNM do need add additional classes.

@MarkHollo
Copy link
Contributor

Hi @csmcneill, thanks for reaching out and thank you for the detailed insight.

So it's either OceanWP that's incompatible with the following, or the plugins in question are incompatible with OceanWP :)

Given the fact that these are plugins, would it potentially be possible for plugins to use different classes (OceanWP classes) when the OceanWP theme is in use? OceanWP is free and requires no additional (premium) options for testing / development / enhancement / compatibility.

Also, following @helgatheviking's advice, would it potentially be possible to add a filter in WooCommerce?

If you can provide us with dev versions of the plugin(s) in question, I can discuss the best option with the team and get back to you, because these are premium products and we don't have any. But your team members did reach us in the past for all our premium options for compatibility purposes with your products.

If you're interested in a mutual collaboration (on this and all future projects), please reach us at support AT oceanwp DOT org, and we'll take it further from there.

Thank you very much for your time in advance

@MarkHollo
Copy link
Contributor

@helgatheviking hi!

I don't think we've ever met, but I know you have been contributing to OceanWP from before (my time) :) It's actually a pleasure to see you here again.

I was wondering, if possible, if you're interested and if you have some time on your hands of course, if we could catch up some time because I'd really love to know more about you and your work, and obviously we can also discuss this topic. If you're in, you can reach me at support AT oceanwp DOT org and we can schedule a brief google meet :) If not, I certainly thank you for your help and advice on this matter.

Best

@helgatheviking
Copy link
Contributor

👋

tracing loop-start.php back a bit further there is apparently a filter woocommerce_product_loop_start that filters the HTML output of the woocommerce_product_loop_start() function.

So while it's not the greatest, we could both perhaps switch our plugins to use woocommerce_product_loop_start() and then filter in our own plugin classes via:

function kia_test_filter_loop_start_classes( $loop_start ) {
	return str_replace( 'class="', 'class="tacos ', $loop_start );
}
add_filter( 'woocommerce_product_loop_start', 'kia_test_filter_loop_start_classes' );

We could also propose to Woo that woocommerce_product_loop_start() accept a 2nd parameter for an array of classes? and make that filterable.

Then the loop/loop-start.php template would need to be updated to:

<ul class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">

Then Ocean would not need to override the loop-start.php at all?

Though we wouldn't have true universality as 1. themes would need to adopt that instead of using the template override.

And some themes go wild and change that loop start from a <ul> to a <div>... then we would be in trouble as both Product Bundles and my plugin will use <li> to open each product in the loop.... using our own templates instead of content-product.php... 🤔 Maybe we should be using content-product-bundled.php or something like that? But we've already both got a lot of hooks/filters in our templates for specifically targeting our layouts.

Sorry for the rambling, just thinking through all the options here, with no clear decision yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@eramits eramits

@MarkHollo MarkHollo

Labels
compatibility enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@helgatheviking @eramits @MarkHollo @csmcneill
0