• rockjonn

• in reply to: need extra tabs in wooCommerce product page
• July 3, 2023 at 11:00 am

To add extra tabs to the WooCommerce product page and populate their content from a CSV or Excel sheet using the Advanced Custom Fields (ACF) plugin, you’ll need to follow these steps:

Install and activate the ACF plugin from the WordPress plugin repository.

Create a new field group in ACF that will contain the text area fields for each tab. Set the location rule to “Post Type” and select “Product” to ensure the field group is associated with the WooCommerce product post type.

Add a text area field for each tab you want to create. You can customize the field settings as needed, such as the field label and field name.

Once you have set up the field group, navigate to a WooCommerce product edit screen in the WordPress backend.

Scroll down to the ACF section, where you should see the fields you created for the tabs. Enter the desired content for each tab in the corresponding text area fields.

To display the content of these tabs on the frontend, you will need to modify your product page template. Locate the file single-product.php in your theme’s directory. If it doesn’t exist, you can create a copy of woocommerce/templates/single-product.php and place it in your theme’s directory.

Edit the single-product.php file and find the section where the product description is displayed. It is typically located within the <div> with the class woocommerce-tabs.

Add the following code inside the <div> with the class woocommerce-tabs:

php

<?php if (have_rows('tab_fields', get_the_ID())) : ?>
    <ul class="tabs">
        <?php while (have_rows('tab_fields', get_the_ID())) : the_row(); ?>
            <li><a>"><?php echo esc_html(get_sub_field('tab_title')); ?></a></li>
        <?php endwhile; ?>
    </ul>
    <?php while (have_rows('tab_fields', get_the_ID())) : the_row(); ?>
        <div id="<?php echo sanitize_title(get_sub_field('tab_title')); ?>">
            <?php echo wpautop(get_sub_field('tab_content')); ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

This code retrieves the ACF repeater field values for the tabs and generates the HTML structure for the tabs and their content. Each tab is generated based on the field values you entered in the backend.

Save the modified single-product.php file.

Now, when you view a WooCommerce product page on the frontend, you should see the additional tabs with their respective content populated from the ACF fields

• rockjonn

• in reply to: Conditional button to display shortcode
• July 3, 2023 at 10:58 am

To create a selection process using buttons to choose the category and date of an event, and then display a corresponding shortcode for a table of raffle numbers, you can utilize a combination of HTML, JavaScript, and PHP. Here’s an example of how you can achieve this:

HTML:

html

<div id=”category-buttons”>
<button class=”category-button” data-category=”category1″>Category 1</button>
<button class=”category-button” data-category=”category2″>Category 2</button>
<button class=”category-button” data-category=”category3″>Category 3</button>
<button class=”category-button” data-category=”category4″>Category 4</button>
</div>

<div id=”date-buttons” style=”display: none;”>
<button class=”date-button” data-date=”date1″>Date 1</button>
<button class=”date-button” data-date=”date2″>Date 2</button>
<button class=”date-button” data-date=”date3″>Date 3</button>
<button class=”date-button” data-date=”date4″>Date 4</button>
</div>

<div id=”shortcode-output” style=”display: none;”></div>

JavaScript:

javascript

document.addEventListener(‘DOMContentLoaded’, function() {
var categoryButtons = document.querySelectorAll(‘.category-button’);
var dateButtons = document.querySelectorAll(‘.date-button’);
var shortcodeOutput = document.getElementById(‘shortcode-output’);

// Add event listeners to category buttons
categoryButtons.forEach(function(button) {
button.addEventListener(‘click’, function() {
var category = this.getAttribute(‘data-category’);

// Show date buttons corresponding to selected category
document.getElementById(‘date-buttons’).style.display = ‘block’;

// Hide previous shortcode output, if any
shortcodeOutput.style.display = ‘none’;

// Remove active class from all category buttons
categoryButtons.forEach(function(btn) {
btn.classList.remove(‘active’);
});

// Add active class to the clicked category button
this.classList.add(‘active’);
});
});

// Add event listeners to date buttons
dateButtons.forEach(function(button) {
button.addEventListener(‘click’, function() {
var date = this.getAttribute(‘data-date’);

// Generate shortcode based on selected category and date
var shortcode = ‘[raffle_table category=”‘ + getCategory() + ‘” date=”‘ + date + ‘”]’;

// Display the generated shortcode
shortcodeOutput.textContent = shortcode;
shortcodeOutput.style.display = ‘block’;

// Remove active class from all date buttons
dateButtons.forEach(function(btn) {
btn.classList.remove(‘active’);
});

// Add active class to the clicked date button
this.classList.add(‘active’);
});
});

// Function to get the selected category
function getCategory() {
return document.querySelector(‘.category-button.active’).getAttribute(‘data-category’);
}
});

PHP:

php

// Shortcode callback function for displaying the raffle table
function raffle_table_shortcode($atts) {
$atts = shortcode_atts(array(
‘category’ => ”,
‘date’ => ”,
), $atts);

// Code to generate and return the raffle table based on the provided category and date

// Example code:
$table = ‘<table>’;
// … Generating the table based on the category and date …
$table .= ‘</table>’;

return $table;
}
add_shortcode(‘raffle_table’, ‘raffle_table_shortcode’);

Make sure to enqueue the JavaScript code and the necessary stylesheets in your theme or plugin to ensure they are loaded on the relevant pages.

In this example, the HTML structure includes two sets of buttons: the category buttons and the date buttons. When a category button is clicked, it activates the corresponding date buttons and displays them. When a date button is clicked, it generates the shortcode based on the selected category and date, and displays the shortcode output.

The JavaScript code handles the button clicks, adds or removes the active class from the buttons, and generates the shortcode. The PHP code registers a shortcode callback function that generates and returns the raffle table based on the provided category and date.

• rockjonn

• in reply to: Conditional logic: toggle ACF group based on extension of ACF File field
• July 3, 2023 at 10:52 am

To show or hide an ACF group based on the extension of a selected file in an ACF File field, you can use a combination of JavaScript and the ACF conditional logic settings. Here’s an example of how you can achieve this:

First, make sure you have the ACF plugin installed and activated.

In your ACF group, add a File field to capture the selected file.

Add a new group that you want to show or hide based on the selected file extension.

In the conditional logic settings for the group you want to show/hide, select “Show this group if” and choose the File field you added in step 2. Set the operator to “Matches regex” and enter the regular expression for the desired file extension. For example, if you want to show the group when a PDF file is selected, use the regex /.pdf$/.

Now, to handle the dynamic show/hide behavior, you can add some custom JavaScript code. Place the following code in your theme’s functions.php file or in a custom JavaScript file:

javascript

(function($) {
  $(document).ready(function() {
    var fileField = $('#your-file-field-id'); // Replace 'your-file-field-id' with the actual ID of your File field
    var groupField = $('#your-group-field-id'); // Replace 'your-group-field-id' with the actual ID of your group field

    fileField.on('change', function() {
      var fileValue = $(this).val();
      var fileExtension = fileValue.substr(fileValue.lastIndexOf('.') + 1);

      if (fileExtension === 'pdf') { // Replace 'pdf' with the desired file extension
        groupField.show();
      } else {
        groupField.hide();
      }
    });
  });
})(jQuery);

Make sure to replace ‘your-file-field-id’ with the actual ID of your File field and ‘your-group-field-id’ with the actual ID of your group field.

This code sets up an event listener on the File field. When the selected file changes, it retrieves the file extension and checks if it matches the desired extension (in this case, ‘pdf’). If there’s a match, it shows the group field; otherwise, it hides the group field.

Remember to enqueue the JavaScript file in your theme or plugin to ensure it is loaded on the relevant pages.

With this implementation, the ACF group will dynamically show or hide based on the extension of the selected file in the ACF File field.

• rockjonn

• in reply to: acf_form “Validation Failed” is followed by wp_die() so breaks the website
• July 3, 2023 at 10:50 am

The code you mentioned in includes/validation.php outputs the errors and then calls wp_die(), which terminates the script execution and displays an error message. This behavior can cause the site to not finish loading properly.

To address this issue, you can modify the validation code to handle the empty required fields more gracefully. Instead of using wp_die(), you can redirect the user back to the form page and display the errors there, allowing them to correct the form without breaking the site.

Here’s an example of how you can modify the validation code to achieve this:

php

function handle_acf_form_submission() {
if (isset($_POST[‘acf_nonce’]) && isset($_POST[‘acf_field_key’])) {
// Verify the ACF form nonce
if (!wp_verify_nonce($_POST[‘acf_nonce’], ‘acf_form_nonce’)) {
// Nonce verification failed, handle accordingly
} else {
// Get the ACF field key
$field_key = $_POST[‘acf_field_key’];

// Check if the required field is empty
if (empty($_POST[$field_key])) {
// Field is empty, store the error message
$error_message = ‘Please fill in the required field.’;

// Redirect back to the form page with the error message
wp_redirect(add_query_arg(‘error’, urlencode($error_message), get_permalink()));
exit();
}

// Process the form submission
// …
}
}
}
add_action(‘init’, ‘handle_acf_form_submission’);

In this example, the code checks if the required field is empty. If it is, it stores an error message and redirects the user back to the form page with the error message appended as a query parameter. The user can then see the error message and correct the form submission without breaking the site.

Make sure to adjust the code to match your specific implementation, including the form field names, error handling, and redirection logic.

By implementing this modification, the site should handle empty required fields more gracefully and avoid breaking when submitting the ACF form on the front end.

• rockjonn

• in reply to: How to populate a select field with titles from another post type
• July 3, 2023 at 10:46 am

To populate a select field on a custom post type with the titles from another post type, you can use a custom function and a WordPress query. Here’s an example of how you can achieve this:

php

function populate_players_select_field( $field ) {
// Query the ‘players’ post type to get the player names
$players_query = new WP_Query( array(
‘post_type’ => ‘players’,
‘posts_per_page’ => -1, // Retrieve all players
) );

// Populate the select field options
$options = array();

if ( $players_query->have_posts() ) {
while ( $players_query->have_posts() ) {
$players_query->the_post();
$options[get_the_ID()] = get_the_title();
}
}

// Set the select field options
$field[‘choices’] = $options;

return $field;
}
add_filter( ‘acf/load_field/name=select_field_name’, ‘populate_players_select_field’ );

Replace ‘select_field_name’ in the add_filter line with the actual name of your select field.

Make sure to place this code in your theme’s functions.php file or in a custom plugin file. This code uses the Advanced Custom Fields (ACF) plugin to modify the field, so make sure you have ACF installed and activated.

What this code does is it hooks into the acf/load_field filter, specifically targeting the field with the specified name, and modifies its choices by querying the ‘players’ post type and retrieving the titles. The titles are then used as options for the select field.

Remember to adjust the post type names (‘players’ and ‘fixtures’) to match your actual custom post types.

Once you save this code and load the post editor, the select field on the ‘fixtures’ post type should be populated with the player names from the ‘players’ post type, allowing you to select the players for a match.