Home › Forums › WoodMart support forum › Woocommerce Product Bundles – Grid Layout issue

Woocommerce Product Bundles – Grid Layout issue

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 2, 2020 at 3:12 am #222891

    Andrew
    Participant

    Hi,

    I am trying to set up the grid layout in the ‘Product Bundle’ product page.

    The grid layout of the items in the product bundle (above the tabs) comes out correctly in Storefront Theme, but not on Woodmart Theme.

    Please see screenshot below.

    Would you be able to help?

    Attachments:
    You must be logged in to view attached files.
    September 2, 2020 at 8:32 am #222964

    Elise Noromit
    Member

    Hello,

    You can configure the shop page layout in the Theme Settings > Shop page > Product grid. You will find the option to set how many products to show on the page, how many products in the row.

    Best Regards

    September 2, 2020 at 9:46 am #222986

    Andrew
    Participant

    Hi,

    This isn’t the Shop Page.

    This is a ‘Product Bundle’ Product Page, that is configured to show multiple products as a bundle. The layout for items within the bundle can be set as ‘Grid’, when you edit the product.

    Please see this documentation for more info.

    For some reason, the Grid layout works in Storefront theme, but doesn’t work in Woodmart theme.

    Hope this provides more clarity on the issue.

    September 2, 2020 at 1:46 pm #223081

    Elise Noromit
    Member

    Hello,

    Please provide the valid credentials and correct login URL.

    Best Regards

    September 2, 2020 at 2:15 pm #223092

    Andrew
    Participant

    Hi,

    Please see below.

    September 3, 2020 at 7:35 am #223224

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    @media (min-width: 768px) {
  .bundled_products.columns-3 .product {
    width: 33.33333333%;
  }
}
.bundle_form .bundle_button {
  margin-bottom: 20px;
}
.bundled_product .details {
  margin-top: 15px;
}
.bundled_products {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.bundled_products .product {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

    Best Regards

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)