I recently saw a post on the Sure crafted Facebook page about product IDs in SureCart and where they where they are actually really easy to see given that they are in the URL when you click edit. You can see an example below where as the bit after ID= the product ID.
In the same Facebook post there was a discussion in there about them being easier to get as they are useful in automations and I can kind of understand this the suggested methodology was to add a column to the existing sc-products page to allow them to be seen.
The above image is an example of the default SureCart products page and what was wanted is an easy way here to copy and get at the products id. Having done similar I knew the easiest way with the SureCart pages is to actually inject in some custom JavaScript on this page only to show you what you need, I’ve published similar options for example for presto player so have done this before and knew it was possible.
We already know the url we need to run this on is SC-Products the id is actually in the edit link and we just need to split it so the code is actually really simple. once we have that in place we have a products page that looks like the below image.
How did i achieve this? using the following snippet below
<?php
/**
* Plugin Name: SureCart – Product ID Column
* Description: Adds a "Product ID" column to the SureCart products list, parsed from the Edit link.
*/
add_action('admin_enqueue_scripts', function ($hook) {
// Only run on the SureCart Products list page.
if (
!isset($_GET['page']) ||
$_GET['page'] !== 'sc-products' ||
isset($_GET['action']) // avoid edit screen itself
) {
return;
}
// Assumes jQuery is already bundled in WP admin. if you've disabled it yu will need to add it in.
wp_add_inline_script('jquery-core', <<<JS
(function($){
function addProductIdColumn(){
var table = $('.wp-list-table.widefat.fixed.striped'); // the standard list table
if(!table.length) return;
// Avoid duplicating if something re-runs this.
if (table.find('th.column-product_id').length) return;
// Insert header cell after the first column (Name).
table.find('thead tr, tfoot tr').each(function(){
$('<th class="manage-column column-product_id">Product ID</th>')
.insertAfter($(this).find('th').eq(0));
});
// Build body cells
table.find('tbody tr').each(function(){
var \$row = $(this);
// Find the "Edit" link in this row
var editLink = \$row.find('a').filter(function(){
var href = this.href || '';
return href.indexOf('page=sc-products') !== -1 &&
href.indexOf('action=edit') !== -1 &&
href.indexOf('id=') !== -1; // this is what we want
}).get(0);
var id = '';
if (editLink) {
try {
var url = new URL(editLink.href);
id = url.searchParams.get('id') || '';
} catch(e){}
}
// Create the cell
var \$cell = $('<td class="column-product_id"></td>');
if (id) {
var \$code = $('<code class="sc-prod-id" title="Click to copy"></code>')
.text(id)
.css({ cursor:'copy', userSelect:'all' })
.on('click', function(){
navigator.clipboard && navigator.clipboard.writeText(id);
});
var \$btn = $('<button type="button" class="button button-small" style="margin-left:.5rem;">Copy</button>')
.on('click', function(){
navigator.clipboard && navigator.clipboard.writeText(id);
var \$b = $(this);
var orig = \$b.text();
\$b.text('Copied!');
setTimeout(function(){ \$b.text(orig); }, 1200);
});
\$cell.append(\$code).append(\$btn);
} else {
\$cell.text('—');
}
// Insert after first cell (Name)
\$row.find('td').eq(0).after(\$cell);
});
}
$(addProductIdColumn);
})(jQuery);
JS
);
// add width
add_action('admin_print_styles', function () {
echo '<style>
th.column-product_id, td.column-product_id { width: 280px; }
td.column-product_id code { display:inline-block; max-width: 200px; overflow:hidden; text-overflow: ellipsis; vertical-align: middle; }
</style>';
});
});You can watch the accompanying video here to see it all in action
