Shopkeeper主题下WordPress Woocommerce自定义带分类跳转媒体网格咨询

Hey there! I’ve worked with Shopkeeper and WooCommerce quite a bit, so let’s walk through the easiest ways to build that eye-catching, variable-size image grid that links to your product categories—since the default Product Categories component is too restrictive here.

Option 1: No Plugins—Custom HTML + CSS Grid (Most Lightweight) #

This is my go-to for minimal overhead, since you don’t need extra plugins and it’s fully customizable.

1. Add a Custom HTML Block
   Head to your homepage editor (Gutenberg works great here, or Shopkeeper’s built-in editor) and drop in a "Custom HTML" block.

2. Write the Grid HTML
   Use this structure—each <a> tag links to a category, and we’ll use classes to control item size:

   <div class="custom-category-grid">
     <!-- Large item (spans 2 columns/rows) -->
     <a href="/your-category-slug-1/" class="grid-item grid-large">
       <img src="https://your-site.com/path/to/large-image.jpg" alt="Category 1 Name" loading="lazy">
     </a>
     <!-- Medium items (single column/row) -->
     <a href="/your-category-slug-2/" class="grid-item grid-medium">
       <img src="https://your-site.com/path/to/medium-image.jpg" alt="Category 2 Name" loading="lazy">
     </a>
     <a href="/your-category-slug-3/" class="grid-item grid-medium">
       <img src="https://your-site.com/path/to/medium-image-2.jpg" alt="Category 3 Name" loading="lazy">
     </a>
     <!-- Add as many items as you want, even multiple links to the same category! -->
   </div>
   

   Replace the URLs with your actual category permalinks and image URLs.

3. Add Custom CSS
   Go to Appearance > Customize > Additional CSS and paste this to style the grid:

   .custom-category-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
   }
   .grid-item img {
     width: 100%;
     height: 100%;
     object-fit: cover; /* Ensures images don't stretch */
     border-radius: 4px; /* Optional: adds rounded corners */
   }
   .grid-large {
     grid-column: span 2;
     grid-row: span 2;
   }
   .grid-medium {
     grid-column: span 1;
     grid-row: span 1;
   }
   /* Adjust breakpoints for mobile if needed */
   @media (max-width: 768px) {
     .grid-large {
       grid-column: span 1;
       grid-row: span 1;
     }
   }
   

   Tweak the minmax value, gap size, or border radius to match your Shopkeeper theme’s style.

Option 2: Lightweight Plugin (Visual, No Code) #

If you prefer a point-and-click interface, use FooGallery (Free Version)—it’s perfect for custom grids and links:

• Install and activate FooGallery from the WordPress plugin repository.
• Go to FooGallery > Add Gallery and upload your images.
• For each image, click the "Edit" icon, then set the Custom URL to your category’s permalink.
• Under "Gallery Settings", choose the Grid Layout (or Masonry for more organic variable sizes). Adjust columns, spacing, and image cropping to fit your needs.
• Copy the gallery shortcode and paste it into your homepage where you want the grid to appear.

Option 3: Use Shopkeeper’s Built-in Page Builder (WPBakery) #

If you’re already using WPBakery (included with Shopkeeper), you can build the grid without extra tools:

• Add a new "Row" to your homepage, then split it into columns (e.g., 2 columns, then nest rows inside if needed).
• Add an "Image" module to each column. Upload your image, then set the Link to "Custom URL" and paste your category permalink.
• Resize rows/columns to create variable-sized blocks (e.g., make one row span the full width for a large image, others split into halves).

Pro Tips: #

• Optimize Images: Use WooCommerce’s built-in image cropping (WooCommerce > Settings > Products > Display) or a plugin like ShortPixel to keep load times fast.
• Test Responsiveness: Check how the grid looks on mobile—adjust the CSS or plugin settings to ensure it stacks nicely.

内容的提问来源于stack exchange，提问作者Jens Helderweirdt