Terry O&#039;Brien (HoosierDragon)

<p>A very simple shortcode series to create a text area which can be hidden or displayed based on a click on the title. Text areas by default are hidden.</p>
<p>This shortcode series uses jQuery functionality to a) determine which text areas are to be toggled and b) toggle them.</p>
<h4>Use</h4>
<p>Basic use is to surround a block of text with the “[tt]” shortcode and specify a title parameter within the shortcode. The title will be shown on the page, preceeded by an indicator whether the associated text area is hidden (►) or shown (▼). Clicking the title link will toggle the display of the dependant text area, as well as toggle the indicator.</p>
<p>Groups of text areas can be shown or hidden at once through the “[tt_part]” and “[tt_all]” shortcodes.</p>
<p>The “[tt_part]” shortcode uses a required parameter named “class” that links it to all “[tt]” shortcodes and their associated text areas with the same class parameter. Clicking the “[tt_part]” title link will toggle all associated text areas and any “[tt_part]” shortcode links with the same class according to the status of the parent shortcode. Text areas of this section that are already displayed when the parent link is clicked will remain displayed, and vice versa with hidden text areas.</p>
<p>The “[tt_all]” shortcode will toggle all “[tt]” shortcode text areas, any intermediate “[tt_part]” links and any mirrored “[tt_all]” links, according to the status of the particular title link. Text areas that are already displayed when the overall link is clicked to display all the text areas will remain displayed, and vice versa with hidden text areas.</p>
<p>Both the “[tt_part]” and “[tt_all]” shortcodes may be placed anywhere on the web page and can be used multiple times on the same web page.</p>
<h4>Parameters</h4>
<p>The “[tt]” shortcode has one required parameter and two optional parameters, plus the required content of the shortcode.</p>
<ul>
<li>The “class” parameter is optional: this links the particular text area with the “[tt_part]” shortcode, which can display or hide groups of text areas. This parameter must consist of only letters and numbers.</li>
<li>The “style” parameter is optional: this allows the author to apply CSS style components to the given shortcode content, which will only be visible when the content is made visible. Style components are limited to anything that applies to the area surrounding and including the area to be displayed and are limited to the following: background-color, border, border-color, border-radius, border-size, border-style, and color. Any other style components or any other text will be ignored. </li>
<li>The “title” parameter is required: this what is displayed as the title of the text area and is used as the control link. </li>
</ul>
<p>The “[tt_part]” short code has two required parameters; it does not use any content.</p>
<ul>
<li>The “class” parameter is required: this is the link to all associated “[tt]” text areas. This parameter must consist of only letters and numbers.</li>
<li>The “title” parameter is required: this what is displayed as the title of the control link, preceded by “Show / Hide All”.</li>
</ul>
<p>The “[tt_all]” short code has no parameters and it does not use any content.</p>


Text Toggle

A very simple shortcode series to create a text area which can be hidden or displayed based on a click on the title. Text areas by default are hidden.

BeRocket

Dmytro Holovnia

<p>Simple plugin for WooCommerce which toggle grid / list view of your products and toggle products count per page.</p>
<p>WooCommerce Grid/List View plugin adds buttons to shops page which toggles grid and list products view.<br />
This is simple plugin with advanced customization of list / grid view toggle buttons and list style.<br />
List view products is vertical list of products with additional information.<br />
Grid view products is default WooCommerce view of products.</p>
<h4>🚀 Spring Premium Days is LIVE!</h4>
<p><strong>Save 30%</strong> on Pro features across BeRocket plugins.<br />
<em>Let customers view products their way with fully customizable grid and list layouts. Advanced list styles and layout presets make browsing faster, cleaner, and more enjoyable, boosting conversions.</em><br />
🌿 Improve your store today. <a href="https://berocket.com/woocommerce-grid-list-view/?utm_source=free_plugin&utm_medium=wporg&utm_campaign=spring_2026&utm_content=top_ad_cta&utm_term=list_grid" rel="nofollow ugc"><strong>Limited time offer!</strong></a></p>
<h4>Features:</h4>
<p>✅ Switch list and grid product view style<br />
✅ Simple and advanced customization for products list view<br />
✅ Customization of buttons for list / grid switch<br />
✅ Products per page switcher for Front End using<br />
✅ Customizable position for buttons list/grid view switcher</p>
<h4>Additional Features in Paid Plugin:</h4>
<p>✅ Customization for Product count switch links<br />
✅ Advanced list style for products<br />
✅ Customization for simple products list style<br />
✅ Customization for advanced products list style<br />
✅ Custom CSS styles</p>
<h4>Plugin Links:</h4>
<p><a href="https://berocket.com/woocommerce-grid-list-view/?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Paid Plugin</a><br />
<a href="https://woocommerce-grid-list.berocket.com/shop/?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Demo 1</a><br />
<a href="https://woocommerce-terms-popup.berocket.com/?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Demo 2</a><br />
<a href="https://docs.berocket.com/plugin/woocommerce-grid-list-view?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Docs</a></p>
<h4>🍬 Wanna try admin side?</h4>
<p><a href="https://berocket.com/woocommerce-grid-list-view/?utm_source=wordpress_org&utm_medium=admin_demo&utm_campaign=list_grid#try-admin" rel="nofollow ugc">Admin Demo</a> – Get access to this plugin’s admin and try it from inside. Change things and watch how they work.</p>
<h4>Premium plugin video</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/LGV7Im4Bfds?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<em>we don’t have video with free plugin right now but we are working on it</em></p>
<h4>Compatibility with WooCommerce plugins</h4>
<p>Grid/List View for WooCommerce has been tested and compatibility is certain with the following WooCommerce plugins that you can add to your site:</p>
<p>🔸 <a href="https://wordpress.org/plugins/woocommerce-ajax-filters/" rel="ugc"><strong>Advanced AJAX Product Filters</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/advanced-product-labels-for-woocommerce/" rel="ugc"><strong>Advanced Product Labels for WooCommerce</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/load-more-products-for-woocommerce/" rel="ugc"><strong>Load More Products for WooCommerce</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/product-preview-for-woocommerce/" rel="ugc"><strong>Product Preview for WooCommerce</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/wish-wait-list-for-woocommerce/" rel="ugc"><strong>Wishlist and Waitlist for WooCommerce</strong></a></p>
<h3>Plugin Settings</h3>
<p>Plugin settings can be found in admin area, WooCommerce -> List/Grid View</p>
<h4>Buttons:</h4>
<p>Custom class – set your own class for list / grid view toggle buttons, this removes all stylization<br />
Buttons display – set where list / grid view toggle buttons will be displayed<br />
Buttons position –  list / grid view toggle buttons will be placed from left or right side<br />
Paddings – sets paddings to list / grid view toggle buttons<br />
Presets – predefined styles for list / grid view toggle buttons</p>
<h4>Product Count:</h4>
<p>Use products count – enable products per page buttons<br />
Custom class for buttons – set your own class for products per page buttons, this removes all stylization<br />
Product count value – set list of products per page toggle buttons<br />
Spliter value – set text between products per page toggle buttons<br />
Text – set custom  text before products per page toggle buttons<br />
Buttons display – set where products per page toggle buttons will be displayed<br />
Buttons position – products per page toggle buttons will be placed from left or right side</p>
<h4>List Style:</h4>
<p>Toggle Simple and Advanced style add additional settings to customize list products view.<br />
To edit element of list click on this element on right side of page<br />
Advanced style for list products view have some presets.</p>
<h4>CSS:</h4>
<p>CSS styles – Some custom css styles that adds to page.</p>
<h4>JavaScript:</h4>
<p>Custom JavaScript that executes on some action.</p>
<h4>License:</h4>
<p>Page for adding product key from BeRocket site</p>


Grid/List View for WooCommerce

Simple plugin for WooCommerce which toggle grid / list view of your products and toggle products count per page.

Text Toggle vs Grid/List View for WooCommerce